wordwrap une très longue chaîne

Question

Comment pouvez-vous afficher une longue chaîne, site web, adresse, mot ou un ensemble de symboles automatique avec des sauts de ligne pour garder une div de largeur? Je suppose un retour à la ligne de toutes sortes. Généralement l'ajout d'un espace fonctionne, mais est-il un CSS solution comme word-wrap?

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

Que puis-je ajouter à la chaîne de l'adapter parfaitement à l'intérieur de 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 long-mot-pauses-mon-div problème? (indice: pas stackoverflow)
• retour automatique à la ligne dans le css / js
• CSS: comment puis-je la force d'une longue chaîne de caractères (sans vide) pour être enveloppé dans XUL et/ou HTML
• CSS overflow avec de longues URL

Longue histoire courte:

Aussi loin que CSS solutions vous avez: - overflow: scroll; de la force de l'élément pour afficher les barres de défilement et overflow:hidden; de simplement couper tout texte supplémentaire. Il est text-overflow:ellipsis; et word-wrap: break-word; , mais ils sont seulement IE (break-word est dans le CSS3 projet, cependant, de sorte qu'il sera la solution à ce 5 ans à partir de maintenant).

Ligne de fond est que si il est très important pour vous d'arrêter ce qui se passe avec du papier d'emballage sur le texte à la ligne suivante la seule solution raisonnable consiste à injecter ­ (soft trait d'union), <wbr> (coupure de mot tag), ou ​ (zéro-largeur de l'espace, même effet qu' ­ moins de trait d'union) dans votre chaîne côté serveur. Si vous n'avez pas l'esprit Javascript, cependant, il est la hyphenator qui 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 FF 2.0 n'est pas sur votre navigateur de la matrice, puis en utilisant ces est une solution viable. Malheureusement, il n'a pas de trait d'union pour couper la ligne précédente où la parole est cassé, ce qui est une faute de frappe cauchemar. Je vous recommande d'utiliser le Hyphenator comme suggéré par Paolo qui est JavaScript discret. L'automne-retour pour non JavaScript activé, les utilisateurs seront alors cassé le mot, sans trait d'union. Je peux vivre avec ça pour le moment. Ce problème sera plus susceptible de survenir dans un CMS, où le concepteur du site n'ont pas de contrôle sur ce contenu sera entré, où des sauts de lignes et des traits d'union peuvent être mises en œuvre.

J'ai pris un coup d'oeil à l' W3 spécification où la césure en CSS3 est discutée. Malheureusement, il semble qu'il ya quelques suggestions, mais rien de concret encore. Il semble que les éditeurs de navigateurs sont encore à mettre en œuvre quelque chose soit encore. J'ai vérifié les deux Mozilla et Webkit pour la réserve de propriété, le code, mais il n'y a aucun signe de.

Answer 3

Effet garanti !

Answer 4

Juste mentionné ce plus ici, mais il est probablement plus pertinent pour cette question. La meilleure propriété, peu de temps sera débordement-wrap. et la meilleure valeur que si elle est mise serait:

* {
   overflow-wrap:hyphenate. 
}

Doesen " semblent être pris en charge en quelque sorte tout de suite au moment de la rédaction de l'iphone ou de firefox, de dépassement et de-wrap:la césure n'est même pas dans le projet de travail.

en attendant, j'utilise:

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

Answer 5

bloc de visualisation;
débordement caché;
débordement de texte: points de suspension;
largeur: 200px; // ou ce qui vous convient le mieux