Текст по всей ширине

361
24 декабря 2016, 15:28

Для того, чтобы текст был по всей ширине, я использовал align="justify". Всё получилось, но появился один баг: в тексте создаются большие пробелы. Как исправить?

Answer 1

Используйте знаки переноса ­.

Сравните первый вариант (без переноса) и второй (с переносом слов)

div{ 
    width: 200px; 
    text-align: justify; 
    font-size: 20px; 
    border: 1px solid #000; 
    margin: 20px; 
    font-family: verdana; 
}
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> 
<div>Lorem ipsum dolor sit amet, con&shy;secte&shy;tur adip&shy;isi&shy;ci&shy;ng elit.</div>

Answer 2

Не обманывайте себя, багом данное действие не является. Это стандартное поведение выравнивания по всей длине (align="justify")

Для примера в MS Word наблюдаются такие же пробелы.
Вот пример:

Это связано с тем, что если длина слова, перенесенного на новую строку превышает допустимый размер поля, если будет помещена на предыдущую строку, то слово переносится вниз, соответственно та строка, предыдущая, она растягивается по всей длине.

Как вариант решения вам нужно либо:

  1. Сделать выравнивание по краю
  2. Подгонять текст под размер допустимого поля (если текст статический)
  3. Подгонять размер поля под текст (также если текст статический)
  4. Смириться (да, это тоже как вариант)
Answer 3

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

.text, 
.text-alt { 
  text-align: justify; 
  width: 400px; 
} 
 
.text-alt { 
  word-spacing: -0.1ex; 
  margin-top: 1em; 
}
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, quidem assumenda consequatur fugit quas dolorem similique tempora voluptatum eum perspiciatis incidunt hic perferendis cumque repellendus eaque quisquam pariatur soluta modi velit. Reprehenderit rem recusandae nostrum placeat ratione, quia iure, voluptatem ad voluptatibus a tempore dignissimos sit quaerat, voluptates. Molestiae nostrum, inventore deleniti, aspernatur odio aut repellat vitae quaerat mollitia quos aliquid dolorum quis reprehenderit, ut consequatur repellendus quisquam ipsum dolores. Rem minima velit non, quam reiciendis! Esse minima corporis architecto id vitae fuga. Consequatur asperiores veniam commodi, velit voluptatibus obcaecati expedita ipsam quo dicta similique animi fugiat quia magni libero.</div> 
 
<div class="text-alt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, quidem assumenda consequatur fugit quas dolorem similique tempora voluptatum eum perspiciatis incidunt hic perferendis cumque repellendus eaque quisquam pariatur soluta modi velit. Reprehenderit rem recusandae nostrum placeat ratione, quia iure, voluptatem ad voluptatibus a tempore dignissimos sit quaerat, voluptates. Molestiae nostrum, inventore deleniti, aspernatur odio aut repellat vitae quaerat mollitia quos aliquid dolorum quis reprehenderit, ut consequatur repellendus quisquam ipsum dolores. Rem minima velit non, quam reiciendis! Esse minima corporis architecto id vitae fuga. Consequatur asperiores veniam commodi, velit voluptatibus obcaecati expedita ipsam quo dicta similique animi fugiat quia magni libero.</div>

Первый блок текста — обычный джастифай, второй — с отрицательным ворд-спейсин.

READ ALSO
Залинковать CSS и HTML файл

Залинковать CSS и HTML файл

Не получается привязать CSS к ХТМЛу

341
Мелкие элементы в header лучше верстать через float или через inline-block? [требует правки]

Мелкие элементы в header лучше верстать через float или через inline-block? [требует правки]

Как лучше выстраивать такие мелкие элементы, как на скриншоте (логотип, поиск, закладки и тд

293
flow:lef и transform:rotate Возможно ли нормально упаковать div

flow:lef и transform:rotate Возможно ли нормально упаковать div

Можно ли притянуть серый блок к развёрнутому тексту? Можно притянуть через сдвиг по relative, но тогда сдвигаются за пределы окна перемещённые...

292
Непонятки с БЭМ

Непонятки с БЭМ

Есть например примитивное меню в котором есть разделители в виде вертикальных полосЯ делаю это с помощью бордера вот так

265