La disposition du texte aura certaines exigences de format en fonction de la langue. Par exemple, les marques de ponctuation telles que les virgules et les demi-colons en chinois simplifiés n'apparaîtront pas au début d'une ligne. Pour l'anglais, un mot complet ne sera pas affiché sur deux lignes. Le navigateur affichera le texte en fonction de principes comme celui-ci. Cependant, parce que la page Web a des limitations de largeur, des lettres continues et longues, des nombres ou des marques de ponctuation dépassent la limite de la largeur de la zone où elle est située, ce qui affecte la vision de la page, comme le montre l'exemple 1. Ce problème est particulièrement important lors de l'affichage des informations d'entrée de l'utilisateur. Ici, nous parlons de la façon de résoudre ce problème.
Dans le projet CSS3, deux nouvelles propriétés, la vitesse de mots et la rupture de mots sont ajoutées au traitement du texte pour résoudre ce problème:
Voici les situations de soutien des navigateurs communs:
| IE6 / 7 [1] | Firefox2 / 3 [2] | Opera3 + | Safari9.5 + / Chrome | |
|---|---|---|---|---|
| {Word-Wrap: Break-Word;} | La largeur de l'élément TD doit être définie Voir l'exemple 4 et l'exemple 5 | Non pris en charge | Non pris en charge | Non pris en charge des éléments TD Voir l'exemple 4 et l'exemple 5 |
| {bris de mot: pause-tout;} | Les symboles continus ne sont pas pris en charge Voir l'exemple 3 | Non pris en charge | Non pris en charge | soutien |
<meta content="IE=7" http-equiv="X-UA-Compatible" /> à l'en-tête pour faire en sorte que IE8 interprétait la page selon IE7.Puisque {Word-Break: Break-All;} provoque une lisibilité sévère de l'anglais et des numériques et ne parvient pas à envelopper des symboles consécutifs, {Word-Wrap: Break-Word;} est un choix relativement bon.
Cependant, face à un tel support si mauvais du navigateur, nous ne pouvons pas résoudre ce problème sans utiliser JavaScript. C'est-à-dire que lorsque le navigateur ne prend pas en charge la solution CSS, insérez les caractères "8203" dans la position appropriée de la chaîne continue (bien sûr, vous pouvez également utiliser <wbr /> et "timide;. Pour le support de ces trois caractères dans le navigateur, veuillez consulter" The WBR Tag ").
function fnBreakWordAll(o){var o = o || {},
iword = o.word || 13,
ire = o.re || '[a-za-z0-9]',
balle = o.all || FAUX,
sclassname = o.classname || 'Word-Break-all',
aels = o.els || (fonction(){
var aels = [],
aallels = document.getElementsByTagName ('*'),
re = new regexp ('(?: ^ | // s +)' + sclassname + '(?: // s + | $)');
pour (var i = 0, ilen = aallels.length; i <ilen; ++ i) {
if (re.test (aallels [i] .classname)) {
aels [aells.length] = aallels [i];
}
}
retourner aells;
}) () || [],
fnbreakword = fonction (oel) {
// Modifiez basé sur http://www.hedgerwow.com/360/dhtml/css-word-break.html
if (! oel || oel.nodetype! == 1) {
retourne false;
} else if (oel.currentStyle && typeof oel.currentStyle.wordwrap === 'String') {
Breakword = fonction (oel) {
oel.runtimestyle.wordwrap = 'break-word';
Retour Vrai;
}
return Breakword (OEL);
} else if (document.createTreeWalker) {
var trim = fonction (str) {
str = str.replace (/ ^ / s / s * /, '');
var ws = // s /,
i = str.length;
while (ws.Test (str.charat (- i)));
return str.slice (0, i + 1);
}
Breakword = fonction (oel) {
var dwalker = document.createTreeWalker (oel, nodeFilter.show_text, null, false);
var nœud, 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;
}
Retour Vrai;
}
return Breakword (OEL);
}
};
pour (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')) || balle){
fnbreakword (aells [i]);
}
}
}
Pour des applications spécifiques, veuillez consulter l'exemple de démonstration
La fonction fnwordbreakall fournit quelques paramètres personnalisés, et les méthodes et paramètres d'utilisation sont les suivants:
fnWordBreakAll({word:15,re:'[//w]',all:true});| paramètre | valeur | illustrer |
|---|---|---|
| Mot | Entier positif, par défaut est 13 | Les mots de ce nombre de mots ne seront pas insérés dans / u8203. Il n'y a pas beaucoup de mots avec plus de 13 lettres dans mon impression, ce qui peut garantir que la plupart des mots ne seront pas brisés |
| concernant | Expression régulière, par défaut [A-ZA-Z0-9] | Expression régulière d'un mot pour déterminer de quels caractères un mot est composé, faites attention à l'évasion de / |
| tous | Valeur booléenne, par défaut faux | Déterminez s'il est exécuté dans tous les navigateurs, par défaut dans Opera et Firefox, et lorsque l'application de classe est exécutée sur Safari dans Th ou TD, cela est principalement utilisé lorsque. |
| nom de classe | Nom de la classe juridique, rupture de mots par défaut - | Le nom d'attribut correspondant de l'élément de la fonction d'exécution |
La partie centrale de cette fonction a été modifiée à partir de Hedger Wang. Une solution JavaScript "Cross Browser Word Breaker" a été compilée. Il utilise des méthodes Document.CreateTreeWalker et Split pour ajouter "# 8203" à chaque personnage des navigateurs non IE. Ce n'est essentiellement aucun problème lorsqu'il est utilisé dans le texte chinois pur, mais si vous observez les exemples qu'il donne, vous constaterez que lorsqu'il y a de l'anglais ou des nombres dans le texte, bien qu'il résout le problème de rupture de ligne, cela rend le texte difficile à lire et augmente l'espacement entre les caractères, donc j'ai apporté les améliorations ci-dessus en fonction de cela.