Comment éviter que de longs mots ne brisent mon div?

Depuis le passage de la mise en page TABLE à la mise en page DIV, un problème commun demeure:

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

RETRO-WHINING : Cela ne s'est jamais produit avec les dispositions de table. Une cellule de tableau s'étendra toujours bien à la largeur du mot le plus long.

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

Quelqu'un a-t-il une solution viable à cela?

Trait d'union souple

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

averyvery­longword

peut être rendu comme

averyverylongword

ou

très long
mot

Une belle expression régulière peut vous assurer que vous ne les insérerez que si nécessaire:

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

Les navigateurs et les moteurs de recherche sont suffisamment intelligents pour ignorer ce caractère lors de la recherche de texte, et Chrome et Firefox (n'en ont pas testé d'autres) l'ignorent lors de la copie de texte dans le presse-papiers.

<wbr> élément

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

averyvery<wbr>longword

Pauses sans trait d'union:

très long
mot

Vous pouvez obtenir la même chose avec un caractère d'espace de largeur nulle ​(ou &#x200B).

FYI, il y a aussi CSShyphens: auto pris en charge par les derniers IE, Firefox et Safari ( mais actuellement pas Chrome ):

div.breaking {
  hyphens: auto;
}

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

Solution rétro-pleurnicher

<table>pour la mise en page est mauvaise, mais display:tablesur d'autres éléments c'est bien. Ce sera aussi décalé (et extensible) que les tables de la vieille école:

div.breaking {
   display: table-cell;
}

overflowet les white-space: pre-wrapréponses ci-dessous sont bonnes aussi.

Deux corrections:

1. overflow:scroll - cela garantit que votre contenu peut être vu au détriment de la conception (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 SO) vous voulez l'empêcher de chevaucher le remplissage, vous devrez probablement créer un autre div, à l'intérieur du remplissage, pour contenir votre contenu.

Edit: Comme l'indiquent les autres réponses, il existe une variété de méthodes pour tronquer les mots, que ce soit en calculant la largeur du rendu côté client (n'essayez jamais de faire ce côté serveur car cela ne fonctionnera jamais de manière fiable, multiplateforme) via JS et insérer des caractères de rupture, ou utiliser des balises CSS non standard et / ou extrêmement 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 élément de contenu de type bloc trop large (image, tableau, etc.), vous aurez besoin d'un débordement pour qu'il ne détruise pas la mise en page / le design.

Par conséquent, utilisez une autre méthode (ou une combinaison de celles-ci), mais n'oubliez pas d'ajouter également un débordement pour couvrir tous les navigateurs.

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

Commencer à utiliser la overflowpropriété CSS n'est pas parfait, mais cela empêche la rupture des conceptions. Appliquez d' overflow:hiddenabord. N'oubliez pas que le débordement peut ne pas se rompre lors du remplissage, donc soit imbriqué divou utiliser une bordure (ce qui fonctionne le mieux pour vous).

Cela masquera le contenu débordant et vous risquez donc de perdre du sens. Vous pouvez utiliser une barre de défilement (en utilisant overflow:autoou overflow:scrollau lieu de overflow:hidden), mais en fonction des dimensions du div et de votre conception, cela peut ne pas avoir l'air ou fonctionner correctement.

Pour résoudre ce problème, nous pouvons utiliser JS pour récupérer les choses et faire une forme de troncature automatisée. J'étais à mi-chemin de l'écriture d'un pseudo-code pour vous, mais cela devient sérieusement compliqué à mi-chemin. Si vous avez besoin d'en montrer autant que possible, jetez un œil au trait d'union ( comme mentionné ci-dessous ).

Sachez simplement que cela se fait au détriment des processeurs de l'utilisateur. Cela pourrait entraîner un chargement et / ou un redimensionnement des pages long.

Il s'agit d'un problème complexe, comme nous le savons, et qui n'est pas pris en charge de manière courante entre les navigateurs. La plupart des navigateurs ne prennent pas du tout en charge cette fonctionnalité de manière native.

Dans certains travaux réalisés avec des e-mails HTML, où le contenu utilisateur était utilisé, mais le script n'est pas disponible (et même CSS n'est pas très bien pris en charge), le morceau suivant de CSS dans un wrapper autour de votre bloc de contenu non espacé devrait au moins aider un 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 multi-navigateurs (JavaScript) qui inclut les éditions ultérieures d'Opera serait d'utiliser le script de Hedger Wang trouvé ici: http://www.hedgerwow.com/360/dhtml/css-word-break.html

Autres liens / réflexions utiles:

Incoherent Babble »Blog Archive» Émulation de l'habillage de mots CSS pour Mozilla / Firefox
http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/

[OU] Pas de retour à la ligne 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-novembre / 024468.html

Emballage de mots CSS Cross Browser

.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+ */
}

Utilisez le style word-break:break-all;. Je sais que cela fonctionne sur les tables.

Voulez-vous dire que, dans les navigateurs qui le prennent en charge, word-wrap: break-wordne fonctionne pas?

S'il est inclus dans la définition du corps de la feuille de style , il devrait fonctionner dans tout le document.

Si le débordement n'est pas une bonne solution, seul un javascript personnalisé pourrait briser artificiellement un mot long.

Remarque: il existe également cette <wbr>balise Word Break . Cela donne au navigateur un endroit où il peut diviser la ligne. Malheureusement, la <wbr>balise ne fonctionne pas dans tous les navigateurs, uniquement Firefox et Internet Explorer (et Opera avec une astuce CSS).

Je viens de vérifier IE 7, Firefox 3.6.8 Mac, Firefox 3.6.8 Windows et Safari:

word-wrap: break-word;

fonctionne pour les liens longs à l'intérieur d'un div avec une largeur définie et aucun débordement déclaré dans le css:

#consumeralerts_leftcol{
    float:left;
    width: 250px;
    margin-bottom:10px;
    word-wrap: break-word;
}

Je ne vois aucun problème d'incompatibilité

Je viens de découvrir le trait d' union à partir de cette question . Cela pourrait résoudre le problème.

Après de nombreux combats, voici ce qui a fonctionné pour moi:

.pre {
    font-weight: 500;
    font-family: Courier New, monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

Fonctionne dans les dernières versions de Chrome, Firefox et Opera.

Notez que j'ai exclu de nombreuses white-spacepropriétés suggérées par les autres, ce qui a en fait brisé l' preindentation pour moi.

Pour moi, sur un div sans taille fixe et avec un contenu dynamique, cela fonctionnait en utilisant:

display:table;
word-break:break-all;

Re le regex dans ce commentaire , c'est bien, mais il ajoute le trait d'union timide uniquement entre des groupes de 5 caractères non-blancs-ou-tirets. Cela permet au dernier groupe d'être beaucoup plus long que prévu, car il n'y a pas de groupe correspondant après lui.

Par exemple, ceci:

'abcde12345678901234'.replace(/([^\s-]{5})([^\s-]{5})/g, '$1­$2')

... aboutit à ceci:

abcde­12345678901234

Voici une version utilisant une anticipation positive pour éviter ce problème:

.replace(/([^\s-]{5})(?=[^\s-])/g, '$1­')

... avec ce résultat:

abcde­12345­67890­1234

La solution que j'utilise habituellement pour ce problème est de définir 2 règles css différentes pour IE et d'autres navigateurs:

word-wrap: break-word;

woks parfaits dans IE, mais word-wrap n'est pas une propriété CSS standard. C'est une propriété spécifique à Microsoft et ne fonctionne pas dans Firefox.

Pour Firefox, la meilleure chose à faire en utilisant uniquement CSS est de définir la règle

overflow: hidden;

pour l'élément qui contient le texte que vous souhaitez habiller. Il n'enveloppe pas le texte, mais masque la partie du texte qui dépasse la limite du conteneur . Cela peut être une bonne solution s'il n'est pas indispensable pour vous d'afficher tout le texte (c'est-à-dire si le texte est à l'intérieur d'une <a>balise)

Mise à jour: gérer cela dans CSS est merveilleusement simple et peu coûteux, mais vous n'avez aucun contrôle sur l'endroit où les pauses se produisent lorsqu'elles se produisent. C'est bien si vous ne vous en souciez pas, ou si vos données ont de longues séries alphanumériques sans interruption naturelle. Nous avions beaucoup de longs chemins de fichiers, d'URL et de numéros de téléphone, qui ont tous des endroits où il est nettement préférable de casser que d'autres.

Notre solution était d'utiliser d'abord un remplacement de regex pour mettre un espace de largeur nulle (& # 8203;) après chaque 15 (disons) caractères qui ne sont pas des espaces ou l'un des caractères spéciaux où nous préférerions les pauses. Nous faisons ensuite un autre remplacement pour mettre un espace de largeur nulle après ces caractères spéciaux.

Les espaces de largeur nulle sont agréables, car ils ne sont jamais visibles à l'écran; les tirets timides étaient déroutants lorsqu'ils se montraient, car les données comportent des tirets importants. Les espaces de largeur nulle ne sont pas non plus inclus lorsque vous copiez du texte hors du navigateur.

Les caractères de coupure spéciaux que nous utilisons actuellement sont le point, la barre oblique, la barre oblique inverse, la virgule, le trait de soulignement, @, | et le trait d'union. Vous ne penseriez pas que vous auriez besoin de faire quoi que ce soit pour encourager la rupture après les traits d'union, mais Firefox (3.6 et 4 au moins) ne se casse pas tout seul aux traits d'union entourés de chiffres (comme les numéros de téléphone).

Nous voulions également contrôler le nombre de caractères entre les pauses artificielles, en fonction de l'espace de disposition disponible. Cela signifiait que l'expression régulière pour correspondre à de longues exécutions insécables devait être dynamique. Cela est souvent appelé, et nous ne voulions pas créer les mêmes regex identiques encore et encore pour des raisons de performances, nous avons donc utilisé un simple cache regex, codé par l'expression regex et ses indicateurs.

Voici le code; vous auriez probablement nommé les fonctions dans un package utilitaire

makeWrappable = function(str, position)
{
    if (!str)
        return '';
    position = position || 15; // default to breaking after 15 chars
    // matches every requested number of chars that's not whitespace or one of the special chars defined below
    var longRunsRegex = cachedRegex('([^\\s\\.\/\\,_@\\|-]{' + position + '})(?=[^\\s\\.\/\\,_@\\|-])', 'g');
    return str
                .replace(longRunsRegex, '$1​') // put a zero-width space every requested number of chars that's not whitespace or a special char
                .replace(makeWrappable.SPECIAL_CHARS_REGEX, '$1​'); // and one after special chars we want to allow breaking after
};
makeWrappable.SPECIAL_CHARS_REGEX = /([\.\/\\,_@\|-])/g; // period, forward slash, backslash, comma, underscore, @, |, hyphen


cachedRegex = function(reString, reFlags)
{
    var key = reString + (reFlags ? ':::' + reFlags : '');
    if (!cachedRegex.cache[key])
        cachedRegex.cache[key] = new RegExp(reString, reFlags);
    return cachedRegex.cache[key];
};
cachedRegex.cache = {};

Testez comme ceci:

makeWrappable('12345678901234567890 12345678901234567890 1234567890/1234567890')

Mise à jour 2: Il semble que les espaces en fait zéro largeur sont inclus dans le texte copié dans au moins certaines circonstances, vous ne pouvez pas les voir. Évidemment, encourager les gens à copier du texte avec des caractères cachés est une invitation à avoir des données comme celles entrées dans d'autres programmes ou systèmes, même le vôtre, où cela peut causer des problèmes. Par exemple, s'il se retrouve dans une base de données, les recherches sur celui-ci peuvent échouer, et des chaînes de recherche comme celle-ci risquent également d'échouer. L'utilisation des touches fléchées pour parcourir des données comme celle-ci nécessite (à juste titre) une pression supplémentaire sur une touche pour se déplacer sur le caractère que vous ne pouvez pas voir, quelque peu bizarre pour les utilisateurs s'ils le remarquent.

Dans un système fermé, vous pouvez filtrer ce caractère en entrée pour vous protéger, mais cela n'aide pas les autres programmes et systèmes.

Tout compte fait, cette technique fonctionne bien, mais je ne suis pas sûr du meilleur choix de personnage provoquant une rupture.

Mise à jour 3: Faire en sorte que ce personnage se retrouve dans les données n'est plus une possibilité théorique, c'est un problème observé. Les utilisateurs soumettent des données copiées hors de l'écran, elles sont enregistrées dans la base de données, les recherches interrompent, les choses trient bizarrement, etc.

Nous avons fait deux choses:

1. Écrit un utilitaire pour les supprimer de toutes les colonnes de toutes les tables de toutes les sources de données pour cette application.
2. Ajout d'un filtrage pour le supprimer de notre processeur d'entrée de chaîne standard, il a donc disparu au moment où le code le voit.

Cela fonctionne bien, tout comme la technique elle-même, mais c'est un récit édifiant.

Mise à jour 4: Nous l'utilisons dans un contexte où les données qui y sont transmises peuvent être échappées HTML. Dans les bonnes circonstances, il peut insérer des espaces de largeur nulle au milieu d'entités HTML, avec des résultats funky.

Le correctif consistait à ajouter une esperluette à la liste des caractères sur lesquels nous ne cassons pas, comme ceci:

var longRunsRegex = cachedRegex('([^&\\s\\.\/\\,_@\\|-]{' + position + '})(?=[^&\\s\\.\/\\,_@\\|-])', 'g');

Nécessité de définir "mise en page du tableau: fixe" pour que le retour à la ligne fonctionne

HYPHENATOR est la bonne réponse (donnée ci-dessus). Le vrai problème derrière votre question est que les navigateurs Web sont encore (en 2008) extrêmement primitifs qu'ils n'ont pas de fonction de césure. Écoutez, nous en sommes encore aux débuts de l'utilisation de l'ordinateur - nous devons être patients. Tant que les concepteurs domineront le monde du Web, nous aurons du mal à attendre de nouvelles fonctionnalités vraiment utiles.

MISE À JOUR: Depuis décembre 2011, nous avons maintenant une autre option, avec la prise en charge émergente de ces balises dans FF et Safari:

p {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

J'ai fait quelques tests de base et cela semble fonctionner sur une version récente de Mobile Safari et Safari 5.1.1.

Tableau de compatibilité: https://developer.mozilla.org/en/CSS/hyphens#AutoCompatibilityTable

Pour la compatibilité avec IE 8+, utilisez:

-ms-word-break: break-all;
     word-break: break-all;

     /* Non standard for webkit */
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;

Voir ici http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

Tout ce que j'avais à faire était d'appliquer cela au style du conteneur div avec une largeur définie.

Utilisez ceci

word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-all;

Si vous avez ceci -

  <style type="text/css">
      .cell {
            float: left;
            width: 100px;
            border: 1px solid;
            line-height: 1em;
      }
  </style>

  <div class="cell">TopLeft</div>
  <div class="cell">TopMiddlePlusSomeOtherTextWhichMakesItToLong</div>
  <div class="cell">TopRight</div>
  <br/>
  <div class="cell">BottomLeft</div>
  <div class="cell">BottomMiddle</div>
  <div class="cell">bottomRight</div>

passez simplement à un format vertical avec des div contenant et utilisez min-width dans votre CSS au lieu de width -

  <style type="text/css">
      .column {
            float: left;
            min-width: 100px;
      }
      .cell2 {
            border: 1px solid;
            line-height: 1em;
      }
  </style>

  <div class="column">
      <div class="cell2">TopLeft</div>
      <div class="cell2">BottomLeft</div>
  </div>
  <div class="column">
      <div class="cell2">TopMiddlePlusSomeOtherTextWhichMakesItToLong</div>
      <div class="cell2">BottomMiddle</div>
  </div>
  <div class="column">
      <div class="cell2">TopRight</div>
      <div class="cell2">bottomRight</div>
  </div>
  <br/>

Bien sûr, si vous affichez de véritables données tabulaires, vous pouvez utiliser une vraie table car elle est sémantiquement correcte et informera les personnes utilisant des lecteurs d'écran qui sont censés être dans une table. C'est les utiliser pour la mise en page générale ou le découpage d'images que les gens vous lyncheront.

J'ai dû faire ce qui suit car, si les propriétés n'étaient pas déclarées dans le bon ordre, cela casserait les mots au mauvais endroit et sans ajouter de trait d'union.

    -moz-white-space: pre-wrap;
white-space: pre-wrap;        
    hyphens: auto;
    -ms-word-break: break-all;
    -ms-word-wrap: break-all;
    -webkit-word-break: break-word;
    -webkit-word-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
hyphens: auto;

Publié à l'origine par Enigmo: https://stackoverflow.com/a/14191114

Ouais, si c'est possible, définir une largeur et un réglage absolus overflow : autofonctionne bien.

p {
    overflow-wrap: break-word;
}


@-moz-document url-prefix() { 
    p {
        white-space: -moz-pre-wrap;
        word-wrap: break-word;
    }
}

"word-wrap: break-word" fonctionne dans Firefox 3.5 http://hacks.mozilla.org/2009/06/word-wrap/

Ajoutez ceci à cssvotre div:word-wrap: break-word;

après tout le mot s'enroule et se brise, préservez votre débordement et voyez si cela résout votre problème. changez simplement l'affichage de votre div pour:display: inline;

Une fonction simple (nécessite un underscore.js) - basée sur la réponse @porneL

    String.prototype.shyBreakString = function(maxLength) {
        var shystring = [];
        _.each(this.split(' '), function(word){
            shystring.push(_.chop(word, maxLength).join('­'));
        });
        return shystring.join(' ');
    };

J'ai écrit une fonction qui fonctionne très bien où elle insère ­x lettres dans le mot pour un bon saut de ligne. Toutes les réponses ici ne prennent pas en charge tous les navigateurs et appareils, mais cela fonctionne bien avec PHP:

/**
 * Add line-break to text x characters in
 * @param  string  $text          
 * @param  integer $characters_in 
 * @return string                 
 */
function line_break_text($text, $characters_in = 10) {

    $split = explode(' ', $text);

    if ( ! empty($split)) {

        foreach ($split as $key => $var) {

            if ( strlen($var) > $characters_in ) {

                $split[$key] = substr_replace($var, '­', $characters_in, 0);

            }

        }

    }

    return implode(' ', $split);

}