Мой клиент попросил включить авторасширение на этой странице: http://carlosdinizart.com/biography/, и я понял, что никогда не видел его сделанные на веб-странице.
Можно ли настроить авторасширение в HTML-документе только с помощью HTML/CSS? Если нет - каковы параметры?
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 не переносится даже при наличии набора символов для возможного разрыва строки в определенном слове.
Update:
Информация о поддержке браузера здесь: 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 {
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. Известно, что не нужно работать в Opera. Работает для Firefox, iOS Safari.
Это НЕ БЕСПЛАТНО: узкие столбцы (менее 6 слов) уродливы, но в целом это делает внешний вид гораздо более похожим на правильно установленный тип.