Макет текста будет иметь некоторые требования к формату в зависимости от языка. Например, знаки препинания, такие как запятые и полуколоны в упрощенном китайском языке, не появятся в начале линии. Для английского языка полное слово не будет отображаться на двух строках. Браузер отобразит текст на основе таких принципов. Однако, поскольку веб -страница имеет ограничения ширины, непрерывные и длинные буквы, цифры или знаки препинания превышают предел ширины области, в которой она находится, что влияет на зрение страницы, как показано в примере 1. Эта проблема особенно заметна при отображении информации пользователя. Здесь мы говорим о том, как решить эту проблему.
В черновике CSS3 два новых свойства Word-WRAP и Word Break добавляются в обработку текста для решения этой проблемы:
Ниже приведены вспомогательные ситуации общих браузеров:
| IE6/7 [1] | Firefox2/3 [2] | Opera3+ | Safari9.5+/Chrome | |
|---|---|---|---|---|
| {Word-WRAP: Break-Word;} | Ширина элемента TD должна быть установлена См. Пример 4 и пример 5 | Не поддерживается | Не поддерживается | Не поддерживается элементы TD См. Пример 4 и пример 5 |
| {Word-Break: Break-All;} | Непрерывные символы не поддерживаются Смотрите пример 3 | Не поддерживается | Не поддерживается | поддерживать |
<meta content="IE=7" http-equiv="X-UA-Compatible" /> в заголовке, чтобы IE8 интерпретировал страницу в соответствии с IE7.Поскольку {Word-Break: Break-All;} вызывает серьезную читаемость английского языка и чисел и не может обернуть последовательные символы, {Word-WRAP: Break-Word;} является относительно хорошим выбором.
Тем не менее, перед лицом такой плохой поддержки со стороны браузера, мы не можем решить эту проблему без использования JavaScript. То есть, когда браузер не поддерживает решение CSS, вставьте символы «8203» в соответствующую позицию непрерывной строки (конечно, вы также можете использовать <wbr /> и «застенчивый ;. Для поддержки этих трех символов в браузере см.
function fnBreakWordAll(o){var o = o || {},
iWord = O.Word || 13,
IRE = O.RE || '[a-za-z0-9]',
Ball = O.all || ЛОЖЬ,
sclassname = o.classname || 'Break-All',
aels = o.els || (function () {
var aels = [],
aallels = document.getelementsbytagname ('*'),
re = new Regexp ('(?:^| // s +)' + sclassname + '(?: // s + | $)');
for (var i = 0, ilen = aallels.length; i <ilen; ++ i) {
if (re.test (aallels [i] .classname)) {
aels [aels.length] = aallels [i];
}
}
вернуть Aels;
}) () || [],
fnbreakword = function (oel) {
// Изменение на основе http://www.hedgerwow.com/360/dhtml/css-word-rak.html
if (! oel || oel.nodeType! == 1) {
вернуть ложь;
} else if (oel.currentStyle && typeof oel.currentStyle.wordWrap === 'string') {
BRACKWORD = function (OEL) {
oel.runtimestyle.wordwrap = 'break-word';
вернуть истину;
}
вернуть Brawingword (OEL);
} else if (document.createTreeWalker) {
var trim = function (str) {
str = str.replace (/^/s/s*/, '');
var ws = // s/,
i = str.length;
while (ws.test (str.charat (-i)));
вернуть str.slice (0, i + 1);
}
BRACKWORD = function (OEL) {
var dwalker = document.createTreeWalker (oel, nodefilter.show_text, null, false);
var node, s, c = string.fromCharcode ('8203'),
// re =/([a-za-z0-9] {0,13})/;
re = new Regexp ('(' + ire + '{0,' + iword + '})');
while (dwalker.nextnode ()) {
node = dwalker.currentNode;
s = trim (node.nodevalue) .split (re) .join (c);
node.nodevalue = s;
}
вернуть истину;
}
вернуть Brawingword (OEL);
}
};
for (var i = 0, n = aels.length; i <n; ++ i) {
var sua = navigator.useragent,
stn = aels [i] .tagname.tolowercase ();
if ((/opera/). test (sua) || (/firefox/).test(sua) || ((/khtml/).test(Sua) &&
(stn === 'td' || stn === 'th')) || мяч){
fnbreakword (aels [i]);
}
}
}
Для конкретных приложений см. Демо -пример
Функция FnWordBreakall предоставляет некоторые настроенные параметры, а методы использования и параметры следующие:
fnWordBreakAll({word:15,re:'[//w]',all:true});| параметр | ценить | иллюстрировать |
|---|---|---|
| Слово | Положительное целое число, по умолчанию 13 | Слова в этом количестве слов не будут вставлены в /U8203. В моем впечатлении не так много слов с более чем 13 буквами, которые могут гарантировать, что большинство слов не будут сломаны |
| репутация | Регулярное выражение, по умолчанию [a-za-z0-9] | Регулярное выражение слова, чтобы определить, из каких символов состоит слово, обратите внимание на побег / |
| все | Логическое значение, ложное по умолчанию | Определите, выполняется ли он во всех браузерах по умолчанию в Opera и Firefox, и когда приложение класса выполняется на сафари в TH или TD, это в основном используется, когда не определяется. |
| классное имя | Имя юридического класса, по умолчанию слов-разрывы-все | Соответствующее имя атрибута элемента функции выполнения |
Основная часть этой функции была изменена из Хедгера Ван. Было составлено решение для JavaScript «Cross Browser Word Breaker». Он использует Document.CreateTreeWalker и разделенные методы, чтобы добавить «#8203» к каждому символу в браузерах, не являющихся нет. По сути, это не проблема, когда он используется в чистом китайском тексте, но если вы соблюдаете примеры, которые он дает, вы обнаружите, что когда в тексте есть английский язык или цифры, хотя он решает проблему разрыва линии, он затрудняет чтение и увеличение между символами, поэтому я сделал вышеуказанные улучшения на основе этого.