Comment puis-je permettre le texte d'envelopper l'intérieur d'un mot si nécessaire?
https://stackoverflow.com/questions/2257657
-
20-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Je cherche la meilleure solution pour permettre le texte d'envelopper au milieu d'un mot, si nécessaire. En plus, je veux dire plus compatible avec le navigateur, et privilégiera les pauses mot avant qu'il ne se casse à l'intérieur d'un mot.
Il serait également utile si le balisage avait l'air plus belle que la mienne (voir ma réponse).
Modifier
Notez ceci est spécifiquement pour le contenu généré par l'utilisateur.
Edit 2:
Environ 25% des utilisateurs de Firefox sur le site en question utilisent encore v3.0 ou au-dessous, il est donc essentiel de les soutenir. Ceci est basé sur la dernière valeur de mois de données (environ 121 000 visites).
La solution 2
Comme il n'y a pas de réponse définitive (dépend de vos besoins, par exemple, voulez-vous des traits d'union, quels navigateurs devez vous soutenir?), Je l'ai fait des recherches via Adobe BrowserLab pour savoir quelles sont les options:
Si vous n'avez pas besoin des traits d'union, vous obtiendrez une meilleure compatibilité en utilisant <wbr>. Si vous avez besoin des traits d'union, puis en utilisant ­ est votre meilleur pari, mais notez que cela ne fonctionnera pas (wrap au char) dans Firefox 2.0 Mac / Windows ou Safari 3.0.
Et, notez que si vous choisissez du tout pour ne pas gérer les mots longs en utilisant trop-plein, faites défiler ou laisser envelopper à un personnage, à la fois IE6 et IE7 réagiront en augmentant la largeur du conteneur (au moins avec le DIV je), alors méfiez-vous.
Résultats:
Browser Method Wraps at char Adds Hyphens Overflows horizontally Container expands horizontally ---------------------------------------------------------------------------------------------------------------------------------------------- Firefox 3.0 - Windows XP None No No Yes No Firefox 3.0 - Windows XP <wbr> Yes No No No Firefox 3.0 - Windows XP ­ or ­ Yes Yes No No Firefox 3.0 - Windows XP word-wrap: break-word No No Yes No IE7 - Windows XP None No No No Yes IE7 - Windows XP <wbr> Yes No No No IE7 - Windows XP ­ or ­ Yes Yes No No IE7 - Windows XP word-wrap: break-word Yes No No No Firefox 3.0 - OS X None No No Yes No Firefox 3.0 - OS X <wbr> Yes No No No Firefox 3.0 - OS X ­ or ­ Yes Yes No No Firefox 3.0 - OS X word-wrap: break-word No No Yes No Safari 3.0 - OS X None No No Yes No Safari 3.0 - OS X <wbr> Yes No No No Safari 3.0 - OS X ­ or ­ No No No No Safari 3.0 - OS X word-wrap: break-word Yes No No No Chrome 3.0 - Windows XP None No No Yes No Chrome 3.0 - Windows XP <wbr> Yes No No No Chrome 3.0 - Windows XP ­ or ­ Yes Yes No No Chrome 3.0 - Windows XP word-wrap: break-word Yes No No No Firefox 2.0 - OS X None No No Yes No Firefox 2.0 - OS X <wbr> Yes No No No Firefox 2.0 - OS X ­ or ­ No No Yes No Firefox 2.0 - OS X word-wrap: break-word No No Yes No Firefox 2.0 - Windows XP None No No Yes No Firefox 2.0 - Windows XP <wbr> Yes No No No Firefox 2.0 - Windows XP ­ or ­ No No Yes No Firefox 2.0 - Windows XP word-wrap: break-word No No Yes No Firefox 3.5 - Windows XP None No No Yes No Firefox 3.5 - Windows XP <wbr> Yes No No No Firefox 3.5 - Windows XP ­ or ­ Yes Yes No No Firefox 3.5 - Windows XP word-wrap: break-word Yes No No No Firefox 3.5 - OS X None No No Yes No Firefox 3.5 - OS X <wbr> Yes No No No Firefox 3.5 - OS X ­ or ­ Yes Yes No No Firefox 3.5 - OS X word-wrap: break-word Yes No No No IE6 - Windows XP None No No No Yes IE6 - Windows XP <wbr> Yes No No No IE6 - Windows XP ­ or ­ Yes Yes No No IE6 - Windows XP word-wrap: break-word Yes No No No IE8 - Windows XP None No No Yes No IE8 - Windows XP <wbr> Yes No No No IE8 - Windows XP ­ or ­ Yes Yes No No IE8 - Windows XP word-wrap: break-word Yes No No No Safari 4.0 - OS X None No No Yes No Safari 4.0 - OS X <wbr> Yes No No No Safari 4.0 - OS X ­ or ­ Yes Yes No No Safari 4.0 - OS X word-wrap: break-word Yes No No No
Exemple HTML:
<html>
<head>
<style>
div {
width: 4em;
border: 1px solid black;
margin-bottom: 6em;
padding: .25em;
}
</style>
</head>
<body>
This is text easily contained by the DIV:
<div>proper width</div>
A long word with no character breaking:
<div>
AReallyLongWordThatNeedsToBeBroken AndAnotherWord
</div>
<i><wbr></i> tag:
<div>
A<wbr>R<wbr>e<wbr>a<wbr>l<wbr>l<wbr>y<wbr>L<wbr>o<wbr>n<wbr>g<wbr>W<wbr>o<wbr>r<wbr>d<wbr>T<wbr>h<wbr>a<wbr>t<wbr>N<wbr>e<wbr>e<wbr>d<wbr>s<wbr>T<wbr>o<wbr>B<wbr>e<wbr>B<wbr>r<wbr>o<wbr>k<wbr>e<wbr>n A<wbr>n<wbr>d<wbr>A<wbr>n<wbr>o<wbr>t<wbr>h<wbr>e<wbr>r<wbr>W<wbr>o<wbr>r<wbr>d
</div>
<i>&shy;</i> character:
<div>
A­R­e­a­l­l­y­L­o­n­g­W­o­r­d­T­h­a­t­N­e­e­d­s­T­o­B­e­B­r­o­k­e­n A­n­d­A­n­o­t­h­e­r­W­o­r­d
</div>
<i>overflow: scroll</i> CSS attribute:
<div style="overflow: scroll">
AReallyLongWordThatNeedsToBeBroken AndAnotherWord
</div>
<i>word-wrap: break-word</i> CSS attribute:
<div style="word-wrap: break-word">
AReallyLongWordThatNeedsToBeBroken AndAnotherWord
</div>
</body>
</html>
Autres conseils
La propriété word-wrap: break-word forcera css longs mots pour envelopper à la ligne suivante si elles sont trop longues pour leur récipient. Ceci est soutenu par IE (aller retour), Firefox et Safari.
Edit: On dirait que vous pourriez être en mesure d'atteindre cet objectif dans les anciennes versions de Firefox et en utilisant white-space: -moz-pre-wrap et white-space: pre-wrap. Voir pour plus d'informations. Je n'ai pas testé avec les anciennes versions de Firefox cependant.
Ma réponse d'une autre instance de cette question, a trouvé à Habillage texte longtemps CSS :
J'utilise la combinaison
word-wrap: break-word;
overflow: hidden;
pour traiter cette question. Le réglage de word-wrap permettra le mot à envelopper malgré sa longueur dans les navigateurs qui prennent en charge cette propriété, alors que le réglage de overflow le fera à couper à la fin de l'espace disponible dans les navigateurs qui ne reconnaissent pas word-wrap. C'est à peu près aussi gracieuse de dégradation que vous êtes susceptible d'obtenir sans aller javascript.
[ Modifier : OP mis à jour sa question à dire est spécifiquement pour le contenu généré par les utilisateurs; le ci-dessous ne sera pas (facilement) travailler pour que (vous devriez avoir votre propre dictionnaire de césure). Laissant ici, bien que, au cas où quelqu'un trouve cette question et a besoin d'une option HTML pour ce faire.]
Vous pouvez utiliser un trait d'union (alias trait d'union; ­ ou ­). Il a été défini dans le chemin du retour HTML4 . Je ne l'ai jamais utilisé, mais je viens d'essayer et il fonctionne dans:. IE6, IE7, 4 Chrome, FF 3.6 et Safari 4 pour Windows au moins
Un peut font valoir que l'agent utilisateur (navigateur) doit gérer cela automatiquement (en utilisant un dictionnaire de césure pour la langue du document). Dans la pratique, je ne sais pas d'un simple navigateur Web qui fait automatiquement Apparemment, les navigateurs modernes ne si vous leur dire qu'ils peuvent. voir la réponse de wsanville pour une option CSS.
Vous pouvez vérifier la propriété CSS word-wrap: break-word.
L'exemple suivant fonctionne dans Google Chrome 4.0, Firefox 3.5.7, Safari 4.0.4 et IE 8:
<html>
<body>
<div style="word-wrap: break-word; width: 50px;">
Loremipsumdolorsitametconsectetueradipiscingelitselaoreetdoloremagnaaliq
</div>
</body>
</html>
Malheureusement, comme l'a noté BalusC dans un commentaire à l'une des réponses , sera fonctionne pas dans les versions de Firefox de plus de 3,5 . Étant donné que la population des utilisateurs en utilisant les anciennes versions de Firefox semble être inférieure ~ 6% , comme
J'ai trouvé une réponse similaire ici:
http: //-tours css. com / extraits / css / prévenir-longues urls-de-rupture-out-of-conteneur / Un support de navigateur plus robuste CSS uniquement Si texte est généré PHP vous avez une fonction PHP : Vous pouvez également essayer fonction PHP exploser si vous avez et connaissez le delimiter.
Affichage après avec boucle (exploser renvoie un tableau). -ms-word-break: break-all;
/* Be VERY careful with this, breaks normal words wh_erever */
word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
<?php
$text = "The quick brown fox jumped over the lazy dog.";
$newtext = wordwrap($text, 20, "<br />\n");
echo $newtext;
?>
Dans le passé, je l'ai utilisé quelque chose comme ça, (qui ne fonctionne pas sur Safari au moment, IIRC, mais était il y a plusieurs années):
A<wbr>V<wbr>e<wbr>r<wbr>y<wbr>L<wbr>o<wbr>n<wbr>g<wbr>W<wbr>o<wbr>r<wbr>d A<wbr>n<wbr>d<wbr>A<wbr>n<wbr>o<wbr>t<wbr>h<wbr>e<wbr>r<wbr>W<wbr>o<wbr>r<wbr>d
(je générer cette dynamique afin que la personne faisant la mise en page ne serait pas regarder une telle atrocité.)
Entrez saut de ligne du clavier au point où vous voulez briser.
par exemple.
Thisisaverylongword
deviendrait
Thisisavery longword
