web-dev-qa-db-fra.com

envelopper une très longue chaîne

Comment pouvez-vous afficher une longue chaîne, une adresse de site Web, un mot ou un ensemble de symboles avec des sauts de ligne automatiques pour conserver une largeur de div? J'imagine une sorte de retour à la ligne. L'ajout d'un espace fonctionne généralement, mais existe-t-il une solution CSS telle que Word-wrap?

Par exemple, il (très méchamment) chevauche des divs, force le défilement horizontal, etc.

Que puis-je ajouter à la chaîne ci-dessus pour l'adapter parfaitement à quelques lignes dans un div ou dans la fenêtre du navigateur?

cssstringlong-integerword-wrap
71
Peter Craig

Cette question a déjà été posée ici:

Longue histoire courte:

En ce qui concerne les solutions CSS, vous avez: overflow: scroll; pour forcer l'élément à afficher les barres de défilement et overflow:hidden; pour couper tout texte supplémentaire. Il y a text-overflow:Ellipsis; et Word-wrap: break-Word; mais ils sont IE uniquement (break-Word est cependant dans le projet CSS3, donc ce sera la solution à ce problème dans 5 ans).

En fin de compte, s'il est très important pour vous d'empêcher que cela ne se produise en enveloppant le texte à la ligne suivante, la seule solution raisonnable consiste à injecter &shy; (tiret doux), <wbr> (Balise de coupure de mot), ou &#8203; (espace de largeur nulle, même effet que &shy; moins le tiret) du côté serveur de chaîne. Si vous ne vous occupez pas de Javascript, cependant, il y a le trait d'union qui semble être assez solide.

86
Paolo Bergantino

Word-wrap: break-Word; est disponible dans les navigateurs compatibles IE7 +, FF 3.5 et Webkit (Safari/Chrome, etc.). Pour gérer IE6, vous devrez également déclarer Word-wrap: break-all;

Si FF 2.0 n'est pas sur la matrice de votre navigateur, leur utilisation est une solution viable. Malheureusement, il ne coupe pas la ligne précédente où le mot est rompu, ce qui est un cauchemar typographique. Je suggérerais d'utiliser le Hyphenator comme suggéré par Paolo qui est un JavaScript discret. La solution de rechange pour les utilisateurs non activés par JavaScript sera alors le mot cassé sans tirets. Je peux vivre avec ça pour le moment. Ce problème se posera très probablement dans un CMS, où le concepteur de sites Web n'a aucun contrôle sur le contenu qui sera saisi ou où les sauts de ligne et les traits d'union peuvent être implémentés.

J'ai jeté un œil à la spécification W où la césure dans CSS3 est discutée. Malheureusement, il semble qu'il y ait quelques suggestions mais rien de concret pour l'instant. Il semble que les fournisseurs de navigateurs n'aient pas encore implémenté quoi que ce soit. J'ai vérifié à la fois Mozilla et Webkit pour le code propriétaire mais il n'y a aucun signe.

31
Kevin Rapley

Word-break:break-all fonctionne un régal

25
Sam Jones

Je viens de mentionner cela sur ici mais probablement plus pertinent pour cette question. La meilleure propriété sous peu sera le débordement. et la meilleure valeur si elle est mise en œuvre serait:

* {
   overflow-wrap:hyphenate. 
}

Ne semble pas être pris en charge de quelque manière que ce soit au moment de l'écriture sur l'iphone ou le firefox, et le débordement: le trait d'union n'est même pas dans le brouillon de travail.

en attendant j'utiliserais:

p {
    Word-wrap: break-Word;
    -moz-hyphens:auto; 
    -webkit-hyphens:auto; 
    -o-hyphens:auto; 
    hyphens:auto; 
}
9
adriatiq

J'utilise le code pour empêcher toutes les longues chaînes, les URL, etc.

 -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;
3
Roman Losev
 affichage: bloc; 
 débordement: caché; 
 débordement de texte: points de suspension; 
 largeur: 200 px; // ou ce qui vous convient le mieux
3
jamiethepiper

J'espère qu'un jour nous aurons accès à Word-wrap propriété dans CSS3: Force Wrapping: la propriété 'Word-wrap' .

Un jour...

2
Chad Birch

Normalement, les cellules le feront naturellement, mais vous pouvez forcer ce comportement sur une div avec:

div {
  width: 950px;
  Word-wrap: break-Word;
  display: table-cell;
}
1
nikc

Spécifiez toujours la propriété line-height - si vous ne le spécifiez pas, cela pourrait entraîner l'échec de votre Word-break: break-all; propriété.

0
Shraddha Mohite

Il semble que cela fasse l'affaire pour le dernier Chrome:

[the element],
[the element] * {
  Word-wrap: break-Word;
  white-space: pre;
}

Je n'ai vérifié aucun navigateur, sauf Chrome.

0
SDMulroy