Comment éviter que les mots longs ne cassent ma div ?

Question

Depuis que nous sommes passés de la présentation TABLE à la présentation DIV, un problème commun persiste :

PROBLÈME Vous remplissez votre DIV avec du texte dynamique et, inévitablement, il y a un mot super long qui dépasse le bord de la colonne de votre div et donne à votre site un aspect non professionnel.

RETRO-WHINING : Cette jamais s'est produite avec des mises en page de tableaux. Une cellule de tableau s'étend toujours à la largeur du mot le plus long.

SÉVÉRITÉ : Je constate ce problème sur les sites les plus importants, en particulier sur les sites allemands où même des mots courants tels que "limitation de vitesse" sont très longs ("Geschwindigkeitsbegrenzung").

Quelqu'un a-t-il une solution viable à ce problème ?

Answer 1

Trait d'union souple

Vous pouvez indiquer aux navigateurs où séparer les mots longs en insérant un trait d'union ( ­ ) :

averyvery­longword

peut être rendu par

averyverylongword

ou

averyvery-
mot long

Une belle expression régulière peut garantir que vous ne les insérerez pas à moins que cela ne soit nécessaire :

/([^\s-]{5})([^\s-]{5})/ → $1­$2

Les navigateurs et les moteurs de recherche sont suffisamment intelligents pour ignorer ce caractère lors d'une recherche de texte, et Chrome et Firefox (je n'ai pas testé les autres) l'ignorent lorsqu'ils copient du texte dans le presse-papiers.

<wbr> élément

Une autre option consiste à injecter <wbr> , un ancien IE-isme qui est maintenant en HTML5 :

averyvery<wbr>longword

Ruptures sans trait d'union :

averyvery
mot long

Vous pouvez obtenir le même résultat avec le caractère d'espacement de largeur nulle ​ (ou &#x200B ).

---

Pour information, il y a aussi CSS hyphens: auto supporté par les dernières versions d'IE, Firefox et Safari ( mais pas encore Chrome ) :

div.breaking {
  hyphens: auto;
}

Cependant, cette césure est basée sur un dictionnaire de césure et il n'est pas garanti qu'elle casse les mots longs. Elle peut cependant rendre le texte justifié plus joli.

La solution du rétro-whining

<table> pour la mise en page est mauvaise, mais display:table sur d'autres éléments. Il sera aussi excentrique (et extensible) que les tables de l'ancienne école :

div.breaking {
   display: table-cell;
}

---

overflow et white-space: pre-wrap Les réponses ci-dessous sont également bonnes.

Answer 2

Deux correctifs :

1. overflow:scroll -- cela permet de s'assurer que votre contenu peut être vu au détriment du design (les barres de défilement sont laides)
2. overflow:hidden -- coupe simplement tout débordement. Cela signifie que les gens ne peuvent pas lire le contenu.

Si (dans l'exemple du SO) vous voulez éviter que le contenu n'empiète sur le rembourrage, vous devrez probablement créer une autre div, à l'intérieur du rembourrage, pour contenir votre contenu.

Edit : Comme l'indiquent les autres réponses, il existe une variété de méthodes pour tronquer les mots, qu'il s'agisse de calculer la largeur de rendu côté client (n'essayez jamais de le faire côté serveur car cela ne fonctionnera jamais de manière fiable, quelle que soit la plate-forme) par JS et d'insérer des caractères de coupure, ou d'utiliser des balises CSS non standard et/ou totalement incompatibles ( word-wrap: break-word ne semble pas fonctionner dans Firefox ).

Cependant, vous aurez toujours besoin d'un descripteur de débordement. Si votre div contient un autre bloc de contenu trop large (image, tableau, etc.), vous aurez besoin d'un débordement pour ne pas détruire la mise en page/la conception.

Utilisez donc une autre méthode (ou une combinaison de méthodes), mais n'oubliez pas d'ajouter un débordement afin de couvrir tous les navigateurs.

Edit 2 (pour répondre à votre commentaire ci-dessous) :

Commencez par utiliser le CSS overflow La propriété n'est pas parfaite, mais elle permet d'éviter que les dessins ne se cassent. Appliquer overflow:hidden premier. N'oubliez pas que le débordement peut ne pas être interrompu en cas de remplissage, de sorte que le nid div ou utiliser une bordure (selon ce qui vous convient le mieux).

Cela permet de masquer un contenu trop volumineux et donc de perdre du sens. Vous pouvez utiliser une barre de défilement (en utilisant overflow:auto o overflow:scroll au lieu de overflow:hidden ), mais en fonction des dimensions de la div et de votre design, cela peut ne pas être très esthétique ou efficace.

Pour y remédier, nous pouvons utiliser JS pour ramener les choses en arrière et effectuer une forme de troncature automatisée. J'étais en train d'écrire un pseudo-code pour vous, mais cela se complique sérieusement à mi-parcours. Si vous avez besoin d'en montrer le plus possible, donnez à césure un coup d'œil ( comme indiqué ci-dessous ).

Il faut cependant savoir que cela se fait au détriment des processeurs des utilisateurs. Le temps de chargement et/ou de redimensionnement des pages peut être long.

Answer 3

Il s'agit d'une question complexe, comme nous le savons, qui n'est pas prise en charge de la même manière par tous les navigateurs. La plupart des navigateurs ne prennent pas du tout en charge cette fonctionnalité de manière native.

Dans certains travaux effectués avec des courriels HTML, où le contenu de l'utilisateur était utilisé, mais où script n'est pas disponible (et même CSS n'est pas très bien pris en charge), la partie suivante de CSS dans une enveloppe autour de votre bloc de contenu non espacé devrait au moins aider quelque peu :

.word-break {
  /* The following styles prevent unbroken strings from breaking the layout */
  width: 300px; /* set to whatever width you need */
  overflow: auto;
  white-space: -moz-pre-wrap; /* Mozilla */
  white-space: -hp-pre-wrap; /* HP printers */
  white-space: -o-pre-wrap; /* Opera 7 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: pre-wrap; /* CSS 2.1 */
  white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word; /* IE */
  -moz-binding: url('xbl.xml#wordwrap'); /* Firefox (using XBL) */
}

Dans le cas des navigateurs basés sur Mozilla, le fichier XBL mentionné ci-dessus contient :

<?xml version="1.0" encoding="utf-8"?>
<bindings xmlns="http://www.mozilla.org/xbl" 
          xmlns:html="http://www.w3.org/1999/xhtml">
  <!--
  More information on XBL:
  http://developer.mozilla.org/en/docs/XBL:XBL_1.0_Reference

  Example of implementing the CSS 'word-wrap' feature:
  http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/
  -->
  <binding id="wordwrap" applyauthorstyles="false">
    <implementation>
      <constructor>
        //<![CDATA[
        var elem = this;

        doWrap();
        elem.addEventListener('overflow', doWrap, false);

        function doWrap() {
          var walker = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT, null, false);
          while (walker.nextNode()) {
            var node = walker.currentNode;
            node.nodeValue = node.nodeValue.split('').join(String.fromCharCode('8203'));
          }
        }
        //]]>
      </constructor>
    </implementation>
  </binding>
</bindings>

Malheureusement, Opera 8+ ne semble aimer aucune des solutions ci-dessus, donc JavaScript devra être la solution pour ces navigateurs (comme Mozilla/Firefox). Une autre solution inter-navigateurs (JavaScript) qui inclut les dernières éditions d'Opera serait d'utiliser le script d'Hedger Wang trouvé ici : http://www.hedgerwow.com/360/dhtml/css-word-break.html

Autres liens/réflexions utiles :

Incoherent Babble " Blog Archive " Emulation du word-wrap CSS pour Mozilla/Firefox
http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/

[OU] Pas d'habillage de mot dans Opera, s'affiche correctement dans IE
http://list.opera.com/pipermail/opera-users/2004-November/024467.html
http://list.opera.com/pipermail/opera-users/2004-November/024468.html

Answer 4

CSS Cross Browser Word Wrap

.word_wrap
{
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

Answer 5

HowWouldYourSiteDealWithCommentsLikeThisOnelanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogochLlanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogochLlanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogochLlanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogochwyngyllgogerychwyrndrobwllllantysiliogogogochLlanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogochLlanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogochLlanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch