Есть определенное слово, нужно его растянуть по ширине div
Можно изменить letter-spacing
но блок резиновый, как подобрать непонятно. Возможно ли решить на CSS без скриптов и не разбивая слово на элементы?
-
вы знаете конкретное количество букв в слове? или слово каждый раз может быть разным?– Grundy ♦20 дек 2015 в 11:27
-
Допустим знаем, хотя второй вариант еще интереснее)))– Женя Веденин20 дек 2015 в 14:39
-
1тогда может подойти вот это решение из аналогичного вопроса– Grundy ♦20 дек 2015 в 14:42
3 ответа
каждой букве одеваешь span и родителю text-align: justify;
например:
<div style="text-align: justify;">
<span>С</span><span>л</span><span>о</span><span>в</span><span>о</span>
</div>
-
Снизу то же вариант. Но он плох в плане seo и вообще костыльный. Интересуют красивые решения 20 дек 2015 в 4:02
-
Это хорошее решение для вашей задачи. Скорее всего у вас задача неправильно поставлена.– Steve20 дек 2015 в 13:12
Помещаем нужное слово в тэг списка, добавляем флексбокс и растягиваем по экрану, например, вот так:
ul{
display:flex;
text-align: center;
padding: 0;
margin: 0;
list-style: none;
}
ul li {
flex: 1 10%;
background: #333;
color: #fff;
margin: 0 10px;
}
<ul>
<li>О</li>
<li>ф</li>
<li>и</li>
<li>г</li>
<li>е</li>
<li>т</li>
<li>ь</li>
</ul>
-
-
Совет хороший, но тот же метод получается. Хочется слово оставить как есть. А оформление через CSS 20 дек 2015 в 14:38
В итоге вставил между буквами пробелы и выровнял через text-align: justify;
Если у кого есть более цивилизованное предложение, буду очень рад.