Можно ли включить автоматическую расстановку переносов в HTML / CSS? - PullRequest
38 голосов
/ 20 января 2012

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

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

Ответы [ 4 ]

38 голосов
/ 20 января 2012

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

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

13 голосов
/ 20 января 2012

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

9 голосов
/ 20 января 2012

Чтобы иметь дело с одной страницей, которая имеет фиксированную ширину для текста, практическим шагом было бы добавить пару символов 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 (текст с гибкой шириной, с максимальной шириной)установить, чтобы вы могли проверить это, изменяя ширину окна браузера).

3 голосов
/ 02 января 2015

В настоящее время мой 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 слов) некрасивые, но в целом это делает макет более похожим на правильно заданный тип.

...