6

Есть определенное слово, нужно его растянуть по ширине div Можно изменить letter-spacing но блок резиновый, как подобрать непонятно. Возможно ли решить на CSS без скриптов и не разбивая слово на элементы?

3
  • вы знаете конкретное количество букв в слове? или слово каждый раз может быть разным?
    – Grundy
    20 дек 2015 в 11:27
  • Допустим знаем, хотя второй вариант еще интереснее))) 20 дек 2015 в 14:39
  • 1
    тогда может подойти вот это решение из аналогичного вопроса
    – Grundy
    20 дек 2015 в 14:42

3 ответа 3

4

каждой букве одеваешь span и родителю text-align: justify;

например:

 <div style="text-align: justify;">
 <span>С</span><span>л</span><span>о</span><span>в</span><span>о</span>
 </div>
2
  • Снизу то же вариант. Но он плох в плане seo и вообще костыльный. Интересуют красивые решения 20 дек 2015 в 4:02
  • Это хорошее решение для вашей задачи. Скорее всего у вас задача неправильно поставлена.
    – Steve
    20 дек 2015 в 13:12
2

Помещаем нужное слово в тэг списка, добавляем флексбокс и растягиваем по экрану, например, вот так:

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>

2
  • Даже интересно стало, кто минусанул...
    – NeedH8
    20 дек 2015 в 12:44
  • Совет хороший, но тот же метод получается. Хочется слово оставить как есть. А оформление через CSS 20 дек 2015 в 14:38
1

В итоге вставил между буквами пробелы и выровнял через text-align: justify; Если у кого есть более цивилизованное предложение, буду очень рад.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.