O layout do texto terá alguns requisitos de formato, dependendo do idioma. Por exemplo, marcas de pontuação como vírgulas e semicolons em chinês simplificado não aparecerão no início de uma linha. Para o inglês, uma palavra completa não será exibida em duas linhas. O navegador exibirá o texto com base em princípios como este. No entanto, como a página da Web possui limitações de largura, letras contínuas e longas, números ou marcas de pontuação excedem o limite da largura da área em que está localizada, o que afeta a visão da página, como mostrado no Exemplo 1. Esse problema é particularmente proeminente ao exibir informações de entrada do usuário. Aqui estamos falando sobre como resolver esse problema.
No rascunho do CSS3, duas novas propriedades e quebra de palavras e quebra de palavras são adicionadas ao processamento do texto para resolver esse problema:
A seguir, são apresentadas as situações de suporte dos navegadores comuns:
| IE6/7 [1] | Firefox2/3 [2] | Opera3+ | Safari9.5+/Chrome | |
|---|---|---|---|---|
| {word-wrap: break-word;} | A largura do elemento TD precisa ser definida Veja o Exemplo 4 e Exemplo 5 | Não suportado | Não suportado | Elementos TD não suportados Veja o Exemplo 4 e Exemplo 5 |
| {Break Word: Break-All;} | Símbolos contínuos não são suportados Veja o Exemplo 3 | Não suportado | Não suportado | apoiar |
<meta content="IE=7" http-equiv="X-UA-Compatible" /> no cabeçalho para fazer o IE8 interpretar a página de acordo com o IE7.Como {Break: Break-All;} causa uma legibilidade severa de inglês e numéricos e falha em embrulhar símbolos consecutivos, {Word-Wrap: Break-Word;} é uma escolha relativamente boa.
No entanto, diante de um apoio tão fraco do navegador, não podemos resolver esse problema sem usar o JavaScript. Ou seja, quando o navegador não suporta a solução CSS, insira os caracteres "8203" na posição apropriada da sequência contínua (é claro que você também pode usar <wbr /> e "tímido;
function fnBreakWordAll(o){var o = o || {},
iword = O.word || 13,
IRE = O.RE || '[a-za-z0-9]',
bola = O.All || falso,
SclassName = O.ClassName || 'Word-break-all',
ALS = O.ELS || (função(){
var aels = [],
Aalles = document.getElementsByTagName ('*'),
re = novo regexp ('(?:^| // s +)' + sclassName + '(?: // s + | $)');
for (var i = 0, ilen = aallels.length; i <ilen; ++ i) {
if (re.test (Aallelels [i] .className)) {
Aels [Aels.Length] = Aallelels [i];
}
}
retornar ALS;
}) () || [],
fnbreakword = function (oel) {
// Modifique com base em http://www.hedgerwow.com/360/dhtml/css-word-brak.html
if (! oel || oel.nodeType! == 1) {
retornar falso;
} else if (oel.currentStyle && typeof oel.currentstyle.wordwrap === 'string') {
breakword = function (oel) {
oel.runtimestyle.wordWrap = 'Break-word';
retornar true;
}
Retornar BreakWord (OEL);
} else if (document.createTreewalker) {
var trim = function (str) {
str = str.place (/^/s/s*/, '');
var ws = // s/,
i = str.length;
enquanto (ws.test (str.charat (-i)));
return str.slice (0, i + 1);
}
breakword = 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 = novo regexp ('(' + IRE + '{0,' + iword + '})');
while (dwalker.nextNode ()) {
nó = dwalker.currentNode;
S = Trim (Node.NodEvalue) .Split (re) .Join (C);
node.nodEvalue = s;
}
retornar true;
}
Retornar BreakWord (OEL);
}
};
for (var i = 0, n = aels.length; i <n; ++ i) {
var sua = navegator.useragent,
stn = Aels [i] .TAGNAME.TOLOWERCase ();
if ((/Ópera/). teste (sua) || (/firefox/).test(sua) || ((/khtml/).test(sua) &&
(stn === 'td' || stn === 'th')) || bola){
fnbreakword (ALS [i]);
}
}
}
Para aplicações específicas, consulte o exemplo de demonstração
A função FNWordBreakall fornece alguns parâmetros personalizados, e os métodos e parâmetros de uso são os seguintes:
fnWordBreakAll({word:15,re:'[//w]',all:true});| parâmetro | valor | ilustrar |
|---|---|---|
| Palavra | Número inteiro positivo, o padrão é 13 | As palavras dentro desta contagem de palavras não serão inseridas em /u8203. Não há muitas palavras com mais de 13 letras na minha impressão, o que pode garantir que a maioria das palavras não seja quebrada |
| ré | Expressão regular, padrão [A-ZA-Z0-9] | Expressão regular de uma palavra para determinar quais caracteres uma palavra é composta, preste atenção à fuga de / |
| todos | Valor booleano, padrão false | Determine se ele é executado em todos os navegadores, por padrão na Opera e no Firefox, e quando o aplicativo de classe é executado no Safari em TH ou TD, isso é usado principalmente quando. |
| ClassName | Nome da classe legal, Break-all padrão | O nome de atributo correspondente do elemento da função de execução |
A parte central desta função foi modificada a partir de hedger wang. Uma solução JavaScript "Breaker Word Cross Browser" foi compilada. Ele usa os métodos Document.CreateTreeWalker e Split para adicionar "#8203" a cada caractere em navegadores que não são de sua. Basicamente, não há problema quando é usado no texto puro chinês, mas se você observar os exemplos que ele dá, descobrirá que, quando houver inglês ou números no texto, embora resolva o problema de quebra da linha, dificulta a leitura e aumenta o espaçamento entre os caracteres, por isso fiz as melhorias acima com base nisso.