wordwrap une très longue chaîne

Question

Comment afficher une longue chaîne, l'adresse d'un site Web, un mot ou un ensemble de symboles avec la ligne automatique des pauses pour garder une largeur div? Je suppose que wordwrap de toutes sortes. En général, l'ajout d'un espace fonctionne, mais est-il une solution CSS, comme mot-wrap?

Par exemple, il (très désagréablement) chevauche divs, les forces de défilement horizontal, etc. wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

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?

Answer 1

Cette question a été posée ici avant:

• Qui a résolu le problème à long coupures de mots-my-div? (Indice: non stackoverflow)
• wrap dans css / js
• CSS: comment puis-je forcer une longue chaîne (sans vide) être enveloppé dans XUL et / ou HTML
• débordement CSS avec une longue URL

Longue histoire courte:

En ce qui concerne les solutions CSS que vous avez des: pour forcer l'overflow: scroll; élément à afficher les barres de défilement et de couper overflow:hidden; juste à côté de tout texte supplémentaire. Il y a et text-overflow:ellipsis; mais ils sont word-wrap: break-word; IE uniquement (est dans le break-word projet de CSS3, cependant, il sera la solution à ce 5 ans à partir de maintenant).

En bout de ligne est que s'il est très important pour vous d'arrêter cela se produise avec enroulant le texte sur la ligne suivante la seule solution raisonnable consiste à injecter ­ (trait d'union), <wbr> (mot balise de saut) ou ​ (espace zéro largeur, même effet que trait d'union moins <=>) dans votre côté serveur de chaîne. Si cela ne vous dérange pas Javascript, cependant, il y a le qui Hyphenator semble être assez solide.

Answer 2

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

Si 2,0 FF est pas sur votre matrice de navigateur puis en utilisant ces derniers est une solution viable. Malheureusement, il ne pas la césure ligne précédente où le mot est cassé qui est un cauchemar typographique. Je suggère d'utiliser la césure comme suggéré par Paolo qui est discret JavaScript. Le repli pour les utilisateurs non JavaScript activé sera alors le mot rompu sans traits d'union. Je peux vivre avec ça pour le moment. Ce problème sera très probablement dans un surgir CMS, où le concepteur web n'a pas de contrôle sur ce contenu sera inscrit ou lorsque les sauts de ligne-et-doux traits d'union peuvent être mises en œuvre.

J'ai pris un coup d'œil à la W3 spécification où Césure CSS3 est discuté. Malheureusement, il semble qu'il y ait quelques suggestions, mais rien encore concret. Il semble que les éditeurs de navigateurs ne sont pas encore à mettre en œuvre tout soit encore. J'ai vérifié Mozilla et WebKit pour le code proprietory mais il n'y a aucun signe de.

Answer 3

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

Answer 4

Il suffit de mentionner ce sur mais probablement plus pertinente à cette question. La meilleure propriété sera prochainement débordement-wrap. et la meilleure valeur si elle est mise en œuvre serait:

* {
   overflow-wrap:hyphenate. 
}

doesen't semblent être pris en charge de quelque façon que pour l'instant au moment de l'écriture sur l'iPhone ou Firefox, et trop-plein-wrap: hyphenate est même pas dans le projet de travail.

dans l'intervalle, j'utiliser:

p {
    word-wrap: break-word;
    -moz-hyphens:auto; 
    -webkit-hyphens:auto; 
    -o-hyphens:auto; 
    hyphens:auto; 
}

Answer 5

display: block;
overflow: hidden;
text-overflow: ellipsis;
width: 200px; // or whatever is best for you

Answer 6

J'utilise le code pour prévenir toutes les chaînes longues urls 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;

Answer 7

Il faut espérer qu'un jour nous aurons accès à la propriété CSS3 word-wrap:

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

div {
  width: 950px;
  word-wrap: break-word;
  display: table-cell;
}

Indiquez toujours la propriété de la hauteur de la ligne -. Si vous ne spécifiez pas, il pourrait provoquer l'échec de votre propriété word-break: break-all;

Il semble que cela fait le tour pour le dernier Chrome:

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

Je n'ai pas vérifié tous les navigateurs, mais Chrome.

Answer 8

Answer 9

Answer 10

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

div {
  width: 950px;
  word-wrap: break-word;
  display: table-cell;
}

Answer 11

Indiquez toujours la propriété de la hauteur de la ligne -. Si vous ne spécifiez pas, il pourrait provoquer l'échec de votre propriété word-break: break-all;

Il semble que cela fait le tour pour le dernier Chrome:

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

Je n'ai pas vérifié tous les navigateurs, mais Chrome.

Answer 12

Indiquez toujours la propriété de la hauteur de la ligne -. Si vous ne spécifiez pas, il pourrait provoquer l'échec de votre propriété word-break: break-all;

Answer 13

Il semble que cela fait le tour pour le dernier Chrome:

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

Je n'ai pas vérifié tous les navigateurs, mais Chrome.

Answer 14

Answer 15