Можно ли включить автоматическую расстановку переносов в HTML/CSS?

Мой клиент попросил включить автоматическую расстановку переносов на этой странице: http://carlosdinizart.com/biography/, и я понял, что никогда не видел, чтобы это было сделано на веб-странице.

Можно ли настроить авто перенос слов в документе HTML только с помощью HTML/CSS? Если нет - какие варианты?

Источник

4 ответа

Решение

CSS3 предоставляет некоторую поддержку для этого. Источник: http://drublic.de/blog/css3-auto-hyphenation-for-text-elements/ Вы можете проверить документацию w3c здесь: http://www.w3.org/TR/2011/WD-css3-text-20110901/

CSS3 добавляет шесть свойств в список полезных вещей. Это:

  • Самый важный из них hyphens,
  • Вы можете добавить словарь-файлы с hyphenate-resource так что у браузера больше шансов отобразить ваш текст с правильными переносами.
  • hyphenate-before устанавливает минимальное количество символов перед переносом.
  • hyphenate-after делает так же, как hyphenate-before но для символов после переноса слов.
  • hyphenate-lines определяет, на сколько строк записано слово с переносом. с hyphenate-character Вы можете указать, какую HTML-сущность следует использовать, например, \2010,

Основным свойством этого стека является hyphens, Он принимает одно из трех значений: none, manual или же auto, По умолчанию это ручной, где вы можете установить дефис через ­, auto он лучше для непрерывного текста, в то время как слова делятся, если это возможно и доступно. А также none не переносится вообще, даже если есть набор символов для возможного переноса строки в определенном слове.

Обновить:

Информация о поддержке браузера здесь: http://caniuse.com/css-hyphens

Источник

Можно добавить мягкие дефисы в текст в местах, где он может быть разбит. Мягкий дефис представлен сущностью ­ в HTML. Вы можете найти библиотеки / инструменты, которые могут подготовить текст автоматически с ­в нужных местах, в противном случае вам придется делать это вручную.

Источник

Чтобы иметь дело с одной страницей, которая имеет фиксированную ширину для текста, практическим шагом будет добавление пары символов SOFT HYPHEN (U+00AD), используя ссылку на сущность ­ если вам удобнее, чем вводить самого (невидимого) персонажа. Вы можете довольно быстро выяснить, какие слова нужно переносить, чтобы получить хороший результат.

В более сложном случае (несколько страниц, гибкая ширина) используйте препроцессор, или код на стороне сервера, или код на стороне клиента, который добавляет мягкие дефисы. Подход на стороне клиента является самым простым и может применяться независимо от серверных технологий и средств разработки. Помните, что автоматический перенос может быть неправильным и нуждается в некоторой помощи: язык (и) текста должен быть указан в разметке (или иначе, в зависимости от используемой библиотеки).

Как минимум, вы можете просто поставить атрибуты lang=en class=hyphenate в <body> тег и следующий код в head часть:

<script 
  src="http://hyphenator.googlecode.com/svn/tags/Version%204.0.0/Hyphenator.js">
</script>
<script>Hyphenator.run();</script>

Демонстрация: http://bytelevelbooks.com/code/javascript/hyphenation.html (текст с гибкой шириной, для которого задана только максимальная ширина, поэтому вы можете проверить его, варьируя ширину окна браузера).

Источник

В настоящее время мой CSS для <p> является

p   {
    font-style: normal;
    padding: 0;
    margin-top: 0;
    margin-left: 0px ;
    margin-right: .5em ;
    margin-bottom: 0;
    text-indent: 1em;
    text-align: justify;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    word-break:break-word;
    hyphens: auto;
}

Это не работает для Chrome 39 на Mac. Известно, что не работает на Опере. Работает для Firefox, iOS Safari.

Это НЕ надежно: узкие столбцы (до 6 слов) выглядят некрасиво, но в целом макет выглядит как правильно заданный тип.

Источник
Другие вопросы по тегам