Как растянуть текст, на нужную длину?

Question

[wellew]

Подскажите пожалуйста, как задать синему тексту по заголовком такое поведение (чтобы он растягивался на всю ширину заголовка)???

Comments

[dicem]

А в чем проблема вручную выставить межсимвольный интервал?

[alex]

запихать каждую букву в тэг, применить флексбокс

Answer 1

[profesor08]

<div>
  <div>CREATIIVES</div>
  <div class="sub-title">
    <div>S</div>
    <div>U</div>
    <div>B</div>
    <div>-</div>
    <div>T</div>
    <div>I</div>
    <div>T</div>
    <div>L</div>
    <div>E</div>
  </div>
</div>

.sub-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

Comments

[MFNIK]

Ха ха как вариант, вот только разработчик который будет натягивать этот шаблон, будет дооолго вспоминать верстальщика, который это придумал))) особенно если этот текст должен редактироваться из админки....

[Игорь]

MFNIK, Через js цепляетесь к id и разбиваете это все по буквам :)
Бек доволен и вы тоже :)

[profesor08]

MFNIK, результат достигается вот так, то каким образом ты это сделаешь, это уже отдельный вопрос. Еще можно letter-spacing использовать вместо разбиения, но тогда надо вручную подгонять размер контейнера.

[Beliyadm]

profesor08, Ага, и получить отдельный гемор при натягивании адаптива с учетом изменения размера блока с заголовком.
Вариант с JS разбиванием на буквы и флексом в данном случае оптимален

[profesor08]

Beliyadm, Такой вариант имеет место быть и отрицать это глупо и непрофессионально.

[Beliyadm]

profesor08, какой вариант - с letter-spacing и "волшебными" цифрами в размерах блока? Я не отрицаю, имеет место быть, но вариант с флексом более гибок

[profesor08]

Beliyadm, нихрена он не гибок. Гибкость это стили и все. Еще есть вариант с text-align: justify, расставить пробелы между буквами и   между словами. Все. Флекс в топку.

[Beliyadm]

а что такое флекс как не стили?
Вручную расставлять отступы между буквами бред, в данном случае когда JS разбивает слова на дивы и флексом мы их выравниваем - оптимально гибкое решение.
Да, не без хаков для адаптива, но проще чем "волшебные" цифры

[profesor08]

Beliyadm, для text-align: justify ненужны волшебные цифры и js

[Beliyadm]

profesor08, это понятно, только джустифай не всегда корректно работает, не в всех браузерах и не с всеми шрифтами, нет гарантии что растянет как надо.

[profesor08]

Beliyadm, примеры?

Answer 2

[Aleksey Solovyev]

В css нет такого свойства, но можно использовать костыль:
jsfiddle.net/9zcd3gkL/1

ps У Вас с ошибкой написан синий текст: "powered by..."

Comments

[profesor08]

может он имел ввиду силу, ну, ту самую силу

[MFNIK]

Может это поможет?? qaru.site/questions/538080/stretching-text-horizon...
Хотяпо моему было какое то свойство которое увеличивает расстояние между буквами текста, погуглите..

[Aleksey Solovyev]

MFNIK, это свойство называется letter-spacing, но его если только через js считать и добавлять к тексту. Это сложно и глупо, ведь результат будет как и в примере выше.

Answer 3

[2perca]

используйте ccs свойство letter-spacing: 5px;

Answer 4

[Максим]

вообще точного алгоритма нету - обычно всё подбирается ручками