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

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

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

37
css html hyphenation

4 ответов

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-объект следует использовать, например 10.

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

обновление:

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

38

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

12

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

9

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

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

3