Мягкий перенос в HTML (и )
Как вы решаете проблему с мягких переносов на веб-страницах? В тексте могут быть длинные слова,которые вы можете захотеть разбить на дефис. Но вы не хотите, чтобы дефис показывал, находится ли все слово на одной строке.
согласно комментариям на на этой странице <wbr>
является нестандартным "супом тегов, изобретенным Netscape". Похоже на ­
есть проблемы с соблюдением стандартов, а также. Кажется, есть нет способа получить рабочее решение для всех браузеров.
каков ваш способ обработки мягких дефисов и почему вы его выбрали? Есть ли предпочтительное решение или наилучшая практика?
См. связанную дискуссию здесь.
11 ответов
к сожалению, ­
поддержка настолько несовместима между браузерами, что ее нельзя использовать.
QuirksMode прав - сейчас нет хорошего способа использовать мягкие дефисы в HTML. Посмотрим, что можно сделать, чтобы обойтись без них.
2013 edit:согласно QuirksMode, ­
теперь работает/поддерживается во всех основных браузерах.
февраль 2015 резюме (частично обновлено ноябрь 2017)
они все выступают довольно хорошо,­
ребра его, как Google все еще может индекс слов, содержащих его.
-
в браузерах:
­
и­
оба дисплея, как и ожидалось, в основных браузерах (даже старый IE!).<wbr>
не поддерживается в последних версиях IE (10 или 11) и не работает в Edge. -
при копировании и вставке из браузеров: (проверено 2015) как и ожидалось для
­
и­
для Chrome и Firefox на Mac, на Windows (10), он сохраняет символы и вставляет жесткие дефисы в блокнот и невидимые мягкие дефисы в приложения, которые их поддерживают. IE (win7) всегда вставляет дефисы, даже в IE10, а Safari (Mac) копирует таким образом, что вставляет дефисы в некоторых приложениях (например, MS Word), но не в других -
найти на странице работает
­
и­
во всех браузерах, кроме IE, который только матчи точно скопировали матчей (вплоть до IE11) -
поисковые системы: Google соответствует словам, содержащим
­
слова обычно набирается. С 2017 года это, кажется, больше нет слов, содержащих­
. Яндекс апперс будет таким же. Бинг и Байду, похоже, тоже не совпадают.
­
не пасты все как дефисы,<wbr>
не, ­
не пасты все как дефисыпоисковая система соответствия
Обновлено в ноябре 2017 года. <wbr>
не проверено, потому что CMS StackOverflow его раздели.
успех: поиск в целом, без дефиса слово найти эту страницу.
Failure: поисковые системы только найти эту страницу на поиск разбитых сегментов слов или слова с дефисами.
- Google:
­
не,­
успешно - Бинг:
­
не,­
не - Байду:
­
не,­
не удается (может соответствовать фрагментам в более длинных строках, но не слова сами по себе, содержащие­
или­
) - Яндекс:
­
не,­
успешно (хотя возможно, что он соответствует фрагменту строки, как Baidu, а не 100% конечно)
найти на странице в разных браузерах
успехов и неудач как поисковые системы.
- Chrome (40.0.2214.115, Mac):
­
успехов,<wbr>
успехов,­
успехов - Firefox (35.0.1, Mac):
­
успехов,<wbr>
успехов,­
успехов - Safari (6.1.2, Mac):
­
успехов,<wbr>
успехов,­
успехов - в IE10 (с Win7):
­
не только совпадения, когда оба содержат застенчивые дефисы,<wbr>
успехов,­
не только матчи, когда оба содержат застенчивый дефисы - ИЕ8 (с Win7):
­
не только матчи, когда оба содержат застенчивый дефисы,<wbr>
успехов,­
не только матчи, когда оба содержат застенчивый дефисы - ИЕ7 (с Win7):
­
не только матчи, когда оба содержат застенчивый дефисы,<wbr>
успехов,­
не только совпадения, когда оба содержат застенчивые дефисы
существует постоянное усилие стандартизировать перенос в CSS3.
некоторые современные браузеры, в частности, Safari и Firefox, уже поддерживают это. Вот хороший и актуальный ссылка на поддержку браузера.
Как только перенос CSS будет реализован универсально, это будет лучшим решением. В то же время, я могу порекомендовать правила переносов - сценарий JS, который выясняет, как переносить текст в пути больше всего подходит для конкретного браузера.
правила переносов:
- использует Франклин М. Liangs переносов алгоритм, широко известный из латекса и OpenOffice.
- использует перенос CSS3, где он доступен,
- автоматическая вставка
­
в большинстве других браузеров, - поддерживает несколько языков,
- легко настраивается,
- изящно отступает в случае, если javascript не включен.
я использовал его и он работает отлично!
я использую ­
, при необходимости вставляется вручную.
мне всегда жаль, что люди не используют методы, потому что есть какой-то-может быть, старый или странный-браузер, вокруг которого не обрабатывают их так, как они были указаны. Я нашел это ­
работает должным образом в обоих последних браузерах Internet Explorer и Firefox, этого должно быть достаточно. Вы можете включить проверку браузера, говорящую людям использовать что-то зрелое или продолжать на свой страх и риск, если они придут с некоторыми странный браузер.
Слогоделение не так легко и Я не могу рекомендовать оставить его на какой-то Javascript. Это специфическая тема для языка и, возможно, вам нужно будет тщательно пересмотреть deskman, если вы не хотите, чтобы ваш текст раздражал. Некоторые языки, такие как немецкий, образуют сложные слова и, вероятно, приведут к проблемам декомпозиции. Е. Г. Spargelder
(зародыш. сэкономленные деньги, pl.) может, правила переносов, быть обернуты в двух местах (Spar-gel-der
). Однако, обернув его во вторую позицию, поворачивает первую часть, чтобы показать как Spargel-
(зародыш. спаржа), активируя полностью вводящую в заблуждение концепцию в голове читателя и, следовательно, следует избегать.
а как насчет строки Wachstube
? Это может означать либо "караульное помещение" (Wach-stu-be
) или "тюбик воска" (Wachs-tu-be
). Возможно, вы найдете и другие примеры на других языках. вы должны стремиться, чтобы обеспечить среду, в которой deskman может быть поддерживается создание хорошо syllabified текста, корректура каждое критическое слово.
очень важно отметить, что начиная с HTML5, <wbr>
и ­
не должны делать то же самое!
мягкие переносы
­
- мягкий дефис, т. е. U + 00AD: мягкий дефис. Например,
innehålls­förteckning
может быть представлен как
innehållsförteckning
или
innehålls-
förteckning
на сегодняшний день мягкие дефисы работают в Firefox, Chrome и Internet Explorer.
в wbr
элемент
на wbr
элемент - это возможность разрыва слов, которая не будет отображать дефис, если происходит разрыв строки. Например,
ABCDEFG<wbr/>abcdefg
может быть представлен как
ABCDEFGabcdefg
или
ABCDEFG
abcdefg
на сегодняшний день, этот элемент работает в Firefox и Chrome.
на нулевой ширины пространства сущность может использоваться вместо <wbr>
тег надежно практически на любой платформе.
​
также слово столяр сущность, которая может использоваться для запрещения перерыва. (Вставьте между каждым символом слова, за исключением того, где вы хотите перерыв.)
⁠
С этими двумя, Вы можете сделать все, что угодно.
это решение crossbrowser, которое я смотрел некоторое время назад, которое работает на клиенте и использует jQuery:
(function($) {
$.fn.breakWords = function() {
this.each(function() {
if(this.nodeType !== 1) { return; }
if(this.currentStyle && typeof this.currentStyle.wordBreak === 'string') {
//Lazy Function Definition Pattern, Peter's Blog
//From http://peter.michaux.ca/article/3556
this.runtimeStyle.wordBreak = 'break-all';
}
else if(document.createTreeWalker) {
//Faster Trim in Javascript, Flagrant Badassery
//http://blog.stevenlevithan.com/archives/faster-trim-javascript
var trim = function(str) {
str = str.replace(/^\s\s*/, '');
var ws = /\s/,
i = str.length;
while (ws.test(str.charAt(--i)));
return str.slice(0, i + 1);
};
//Lazy Function Definition Pattern, Peter's Blog
//From http://peter.michaux.ca/article/3556
//For Opera, Safari, and Firefox
var dWalker = document.createTreeWalker(this, NodeFilter.SHOW_TEXT, null, false);
var node,s,c = String.fromCharCode('8203');
while (dWalker.nextNode()) {
node = dWalker.currentNode;
//we need to trim String otherwise Firefox will display
//incorect text-indent with space characters
s = trim( node.nodeValue ).split('').join(c);
node.nodeValue = s;
}
}
});
return this;
};
})(jQuery);
Я предлагаю использовать wbr
, поэтому код можно записать следующим образом:
<p>这里有一段很长,很长的<wbr
></wbr>文字;这里有一段</p>
это не приведет пространство между charaters, в то время как ­
не останавливает пробелы, созданные разрывами строк.
Я мягкий дефис символ Юникода успешно в нескольких настольных и мобильных браузерах, чтобы решить эту проблему.
символ Юникода \u00AD
и довольно легко вставить в строку Юникода Python, например s = u'Языки и методы програм\u00ADми\u00ADро\u00ADва\u00ADния'
.
другое решение-вставить сам символ unicode, и исходная строка будет выглядеть совершенно обычной в редакторах, таких как Sublime Text, Kate, Geany и т. д. (курсор будет чувствовать невидимый символ).
Хекс редакторами в доме инструментов можно легко автоматизировать эту задачу.
легкий kludge использовать редкий и видимый характер, как ¦
, который легко скопировать и вставить, и заменить его на мягкий дефис, используя, например, скрипт frontend в $(document).ready(...)
. Исходный код как s = u'Языки и методы про¦гра¦м¦ми¦ро¦ва¦ния'.replace('¦', u'\u00AD')
легче читать, чем s = u'Языки и методы про\u00ADг\u00ADра\u00ADм\u00ADми\u00ADро\u00ADва\u00ADния'
.
иногда веб-браузеры кажутся более прощающими, если вы используете строку Unicode ­
, а не ­
сущности.
Если вам не повезло и все еще приходится использовать JSF 1 , то единственное решение-использовать, не работает.