Comment éviter les longs mots de casser mon div?
Depuis de commutation à partir de la TABLE de mise à DIV-mise en page, un problème commun demeure:
PROBLÈME: vous remplissez votre DIV avec du texte dynamique et, inévitablement, il y a un super-long mot qui s'étend sur le bord de votre div colonne et fait de votre site un aspect professionnel.
RÉTRO-PLEURNICHER: Ce jamais qui s'est passé avec les dispositions de table. Une cellule de tableau sera toujours joliment étendent sur la largeur du plus long mot.
GRAVITÉ: je vois ce problème, même sur les plus grands sites, en particulier sur les sites allemands où même les mots communs comme "limite de vitesse" sont très longues ("Geschwindigkeitsbegrenzung").
Quelqu'un a une solution à cela?
- Vous devez avoir oublié ces super tendu et effectivement cassé des dispositions de table. Je vais prendre overflow:hidden toute la journée plus incontrôlable étirement des cellules.
- Une cellule de tableau va toujours bien???????? s'étendent sur la largeur du plus long mot
- Oui, en général assez bien, comme dans le cas du graphique ci-contre de Stackoverflow connexes de la colonne, si c'était un TABLEAU au lieu d'un DIV, il serait juste un peu plus larges et toujours agréable à regarder, très pragmatique. Ce serait une fonctionnalité intéressante pour être en mesure de tourner sur en DIV, quelque chose comme word-wrap:développez.
- Je sais que beaucoup de gens (et je serais probablement compter moi-même entre eux) qui diront que c'est encore pire comme comportement. Page et la largeur de l'élément est généralement quelque chose qui a beaucoup de temps passé sur elle. Si vous pourriez avoir des mots au hasard de prise de largeurs incontrôlable, vous avez échoué avec votre conception.
- J'ai toujours estimé que le comportement de table était plus en ligne avec le HTML d'origine de la philosophie de la flexibilité. La DIV/CSS rigide largeur de la colonne de la philosophie semble venir de la revue de designers qui ne peut pas traiter avec leurs colonnes, parfois large, parfois plus étroit.
- Un bon design doit être cohérent, si le contenu de la page est en mesure de modifier les dimensions de l'INTERFACE, ce serait en violation de la conception. Sérieusement, d'où vous tirez la ligne avec un élastique de mise en page? Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch?
- Je vois ce que tu veux dire. 😉
- Oui cela a peu à voir avec le fait d'être ultra-stricte de la conception (à partir d'une arty-farty point de vue), et plus de garder les choses constante et utilisable. Avec des tables (et cette zone de commentaire) montrant tout le contenu a d'autres commentaires sont maintenant assez illisible.
- (Si vous voulez lire ce commentaires, il suffit de copier et de les coller dans un éditeur de texte.)
- Comment puis-je trouver la source de cette zone, pour voir si c'est un DIV ou si c'est vraiment une TABLE? Il n'est pas dans l'affichage de la source. N'ai-je pas accès au DOM actuel du texte, même si elle est injectée par AJAX?
- Que ce soit une leçon que l'incorporation d'hébergement externe des images dans AINSI en question est Une Mauvaise Idée™.
- Regardez la façon dont les journaux ont fait pendant des centaines d'années.
- Un "up-to-date" réponse (2014) stackoverflow.com/questions/802175/...
- Rappelle-moi de ne jamais jouer au Scrabble contre un allemand. Cette chose doit être d'une valeur de 300 points! L'2016 solution: Dans votre CSS, ajouter:
word-wrap: break-word;
Il peut y avoir un besoin pour les préfixes de navigateur en fonction de ce que vous êtes à la recherche à l'appui. Gardez également à l'esprit que l'élément ou de l'un des parents (quel que soit l'élément est de déterminer la largeur que vous voulez pour permettre l') doit avoir une largeur définie ou le word-wrap ne prendra pas effet. Espérons que cela aide.
Vous devez vous connecter pour publier un commentaire.
Doux trait d'union
Vous pouvez dire les navigateurs de diviser les mots longs en insérant doux trait d'union (
­
):peut être rendu comme
ou
Une belle expression régulière peut vous assurer que vous ne serez pas en les insérant à moins que cela s'avère nécessaire:
Les navigateurs et les moteurs de recherche sont assez intelligent pour ignorer ce caractère lors de la recherche de texte et de Chrome et de Firefox (ne l'ai pas testé les autres) de les ignorer lors de la copie de texte dans le presse-papiers.
<wbr>
élémentUne autre option consiste à injecter
<wbr>
, un ancien IE-ism, qui est maintenant en HTML5:Rompt avec pas de trait d'union:
Vous pouvez réaliser la même chose avec zéro-largeur de l'espace de caractère
​
(ou​
).Pour info il y a aussi CSS
hyphens: auto
pris en charge par le dernier IE, Firefox et Safari (mais pour l'instant, pas de Chrome):Cependant que la césure est basé sur un dictionnaire de césure et il n'est pas garanti pour briser les mots longs. Il peut faire un texte justifié plus joli si.
Rétro-pleurnicher solution
<table>
pour la mise en page est mauvais, maisdisplay:table
sur d'autres éléments est très bien. Il sera comme original (et élastique) que de la vieille école de tables:overflow
etwhite-space: pre-wrap
les réponses ci-dessous sont aussi très bien.­
lui-même est, en effet, fonctionne très bien sur tous les principaux navigateurs. - jsfiddle.net/Bn3th/([^\s-&<>]{5})([^\s-&<>]{5})/
pour que ça ne casse pas des balises HTML et des entités (en supposant que vous pouvez avoir une chaîne potentiellement avec des balises HTML)Deux correctifs:
overflow:scroll
-- cela permet de s'assurer que votre contenu peut être vu sur le coût de conception (barres de défilement sont moches)overflow:hidden
-- coupe juste à côté de tout débordement. Cela signifie que le peuple ne peut pas lire le contenu.Si (dans l'exemple) que vous souhaitez arrêter, il se chevauchant le rembourrage, vous auriez probablement à créer une autre div, à l'intérieur du rembourrage, pour tenir votre contenu.
Edit: Comme d'autres réponses de l'état, il existe une variété de méthodes pour tronquer les mots, être que le rendu de la largeur sur le côté client (n'essayez jamais de le faire côté serveur comme il ne sera jamais fiable, la croix-plate-forme) par le biais de JS et de l'insertion de saut de caractères, ou de l'utilisation non-standard et/ou sauvagement incompatible CSS des balises (
word-wrap: break-word
qui ne fonctionne pas dans Firefox).Vous aurez toujours besoin d'un dépassement de capacité de descripteur de bien. Si votre div contient un autre aussi à l'échelle de type bloc morceau de contenu (image, tableau, etc), vous aurez besoin de dépassement de faire ne pas détruire la mise en page/design.
Donc par tous les moyens d'utiliser une autre méthode (ou une combinaison d'entre eux), mais n'oubliez pas d'ajouter débordement de trop vous couvrir tous les navigateurs.
Edit 2 (à l'adresse de votre commentaire ci-dessous):
Commencer à l'aide de la CSS
overflow
propriété n'est pas parfait, mais il s'arrête conceptions de la rupture. Appliqueroverflow:hidden
premier. Rappelez-vous que le trop-plein peut pas briser sur le rembourrage soit niddiv
s ou de l'utilisation d'une frontière (ce qui fonctionne le mieux pour vous).Cela permet de masquer débordant de contenu et, par conséquent, vous risquez de perdre le sens. Vous pouvez utiliser une barre de défilement (à l'aide de
overflow:auto
ouoverflow:scroll
au lieu deoverflow:hidden
), mais selon les dimensions de la div, et de votre conception, cela pourrait ne pas ressembler ou de l'excellent travail.Pour corriger cela, nous pouvons utiliser JS pour tirer les choses et de faire une certaine forme de traitement automatisé de troncature. J'étais à mi-chemin par le biais de l'écriture de pseudo-code pour vous, mais il est sérieusement compliqué environ à mi-chemin à travers. Si vous avez besoin de montrer autant que possible, donner hyphenator un coup d'oeil dans (comme mentionné ci-dessous).
Juste être conscient que cela se fait au prix d'utilisateur de la Cpu. Il pourrait en résulter dans les pages de prendre beaucoup de temps pour charger et/ou redimensionner.
overflow: scroll;
dans le cas où le contenu contient des informations utiles. Et puis, le prochain objectif est d'essayer de créer de telles CSS que les barres de défilement n'apparaissent pas. Et dans ce cas, vous avez toujours les barres de défilement en tant que sauvegarde.text-overflow: ellipsis
stackoverflow.com/a/22811590/759452C'est une question complexe, comme nous le savons, et pas pris en charge dans une voie commune entre les navigateurs. La plupart des navigateurs ne prennent pas en charge cette fonctionnalité nativement à tous.
Dans un peu de travail avec les e-mails HTML, où le contenu de l'utilisateur a été utilisé, mais le script n'est pas disponible (et même CSS n'est pas pris en charge très bien) le peu de CSS dans un wrapper autour de votre unspaced bloc de contenu devrait au moins aider un peu:
Dans le cas des navigateurs basés sur Mozilla, le fichier XBL mentionné ci-dessus contient:
Malheureusement, Opera 8+ ne semblent pas comme l'une des solutions ci-dessus, de sorte JavaScript devra être la solution pour les navigateurs (comme Mozilla/Firefox.) Une autre solution de navigateur (JavaScript) qui comprend les éditions ultérieures de l'Opéra serait d'utiliser Hedger Wang script trouvé ici:
http://www.hedgerwow.com/360/dhtml/css-word-break.html
D'autres liens utiles/pensées:
Incohérente Bavardage » Blog Archive » l'Émulation CSS word-wrap pour Mozilla/Firefox
http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/
[OUS] Pas de retour à l'Opéra, affiche bien dans IE
http://list.opera.com/pipermail/opera-users/2004-November/024467.html
http://list.opera.com/pipermail/opera-users/2004-November/024468.html
word-wrap: break-word;
propriété CSS, donc si vous n'avez pas besoin de soutien dans Firefox pour les versions antérieures, vous pouvez éliminer le XBL.CSS de la Croix-Navigateur Word Wrap
Utiliser le style
word-break:break-all;
. Je sais que ça fonctionne sur les tables.Voulez-vous dire que dans les navigateurs qui le supportent,
word-wrap: break-word
ne fonctionne pas ?Si inclus dans la définition du corps de la feuille de style, il devrait fonctionner tout au long de l'ensemble du document.
Si le dépassement est pas une bonne solution, seulement un code javascript personnalisé pourrait artificiellement briser long terme.
Remarque: il est aussi ce
<cpcn>
Mot étiquette de Rupture. Cela donne au navigateur un endroit où il peut diviser le line-up. Malheureusement, la<wbr>
balise ne fonctionne pas dans tous les navigateurs, seulement Firefox et Internet Explorer (et de l'Opéra avec un CSS truc).Viens de vérifier IE 7, Firefox 3.6.8 Mac, Firefox 3.6.8 Windows et Safari:
fonctionne pour longtemps des liens à l'intérieur d'un div avec une largeur définie et aucun débordement déclarée dans le fichier css:
Je ne vois pas de problèmes d'incompatibilité
Je viens de découvrir sur hyphenator de cette question. Qui pourrait résoudre le problème.
Après beaucoup de combats, c'est ce qui a fonctionné pour moi:
Œuvres dans les dernières versions de Chrome, Firefox et Opera.
Remarque que j'ai exclus de nombreux
white-space
propriétés les autres ont suggéré -- qu'effectivement battu lepre
indentation pour moi.Pour moi sur un div sans taille fixe et de contenu dynamique, il a travaillé à l'aide de:
Re la regex dans ce commentaire, c'est bien, mais il ajoute à la timide trait d'union qu'entre les groupes de 5 non-blanc-ou-trait d'union station. Qui permet le dernier groupe sera beaucoup plus long que prévu, car il n'y a pas de groupe correspondant d'après elle.
Par exemple, ceci:
...les résultats de cette:
Voici une version à l'aide d'anticipation positif pour éviter ce problème:
...avec ce résultat:
La solution que j'utilise habituellement pour ce problème est de mettre 2 différentes règles css pour IE et les autres navigateurs:
woks parfait dans IE, mais word-wrap n'est pas un standard de la propriété CSS. C'est un Microsoft propriété spécifique et ne fonctionne pas dans Firefox.
Pour Firefox, la meilleure chose à faire en utilisant uniquement CSS est de définir la règle
pour l'élément qui contient le texte que vous souhaitez envelopper. Il n'a pas le texte à la ligne, mais cacher la partie de texte qui vont au-dessus de la limite de l'conteneur. Il peut être une bonne solution si ce n'est pas essentiel pour vous d'afficher tout le texte (c'est à dire si le texte est à l'intérieur d'un
<a>
tag)Mise à jour: de la Manipulation de ce CSS est merveilleusement simple et à faible charge, mais vous n'avez aucun contrôle sur où des ruptures se produisent quand ils le font. C'est très bien si vous n'avez pas de soins, ou de vos données alphanumériques longs fonctionne sans interruptions naturelles. Nous avons eu beaucoup de fichier long des chemins, les Url et les numéros de téléphone, et qui ont tous les endroits, c'est nettement mieux à briser que d'autres.
Notre solution a été la première à utiliser une regex de remplacement pour mettre à zéro la largeur de l'espace (​) après chaque 15 (dire) des caractères qui ne sont pas des espaces ou l'un des caractères spéciaux où l'on préfère les pauses. Nous avons ensuite faire un autre remplacement de mettre à zéro la largeur de l'espace d'après ces caractères spéciaux.
Espaces de largeur nulle sont gentils, parce qu'ils ne sont pas toujours visibles à l'écran; timide traits d'union sont une source de confusion quand ils ont montré, parce que les données importantes des traits d'union. De largeur nulle en outre, les places ne sont pas inclus lorsque vous copiez du texte dans le navigateur.
Spéciaux caractères de saut que nous utilisons actuellement sont d'époque, barre oblique, oblique, la virgule, le tiret de soulignement, @, |, et le trait d'union. Vous ne voudriez pas que vous auriez besoin de faire quelque chose pour encourager la rupture après des traits d'union, mais Firefox (3.6 et 4 au moins) ne se cassent pas par elle-même à des traits d'union entouré par des chiffres (comme les numéros de téléphone).
Nous avons également voulu contrôler le nombre de caractères entre des pauses artificielles, en fonction de la disposition de l'espace disponible. Cela signifie que la regex pour correspondre au long de la non-rupture de pistes nécessaires pour être dynamique. Ce qui est appelé beaucoup de choses, et nous ne voulions pas créer le même regexes plus et plus pour des raisons de performances, nous avons donc utilisé une simple regex cache par le regex expression et ses drapeaux.
Voici le code; vous auriez probablement d'espace de noms les fonctions dans un package utilitaire:
Test comme ceci:
Mise à jour 2: Il apparaît que les espaces de largeur nulle en fait sont inclus dans le texte copié dans au moins certains cas, vous juste ne pouvez pas les voir. Évidemment, en encourageant les gens à copier le texte avec des caractères cachés dans c'est une invitation à avoir des données comme entrée dans d'autres programmes ou systèmes, et même de votre propre, où il peut causer des problèmes. Par exemple, si elle se retrouve dans une base de données, les recherches contre il peut échouer, et les chaînes de recherche de ce genre sont susceptibles de ne pas trop. Utilisez les touches fléchées pour se déplacer à travers les données de ce type exige (à juste titre) un supplément de pression de touche pour se déplacer à travers le personnage que vous ne pouvez pas voir, un peu bizarre pour les utilisateurs si ils préavis.
Dans un système fermé, vous pouvez filtrer ce caractère sur l'entrée pour vous protéger, mais qui n'aide pas les autres programmes et systèmes.
Tout compte fait, cette technique fonctionne bien, mais je ne suis pas certain de ce que le meilleur choix de rompre provoquant le caractère serait.
Mise à jour 3: Avoir ce caractère de fin de données n'est plus une possibilité théorique, c'est un problème. Les utilisateurs soumettent des données est copié à partir de l'écran, il est enregistré dans la base de données, recherches pause, les choses s'arrangent bizarrement etc..
Nous avons fait deux choses:
Cela fonctionne bien, tout comme la technique elle-même, mais c'est un conte d'avertissement.
Mise à jour 4: Nous utilisons ce dans un contexte où les données de la fed à ce qui peut être échappé HTML. Dans les bonnes circonstances, il peut insérer des espaces de largeur nulle dans le milieu des entités HTML, avec funky résultats.
Solution était d'ajouter une esperluette à la liste des personnages que l'on ne se cassent pas, comme ceci:
if(domainName.length > 15) domainName.replace(/([^\\s]{5})(?=[^\\s])/g, '$1​');
Besoin de mettre la "table-layout: fixed” pour word-wrap de travail
Mise à JOUR:
À compter de décembre 2011, nous avons maintenant une autre option, avec l'émergence d'un soutien de ces balises dans FF et Safari:
J'ai fait quelques test et il semble fonctionner sur une version récente de navigateur Safari Mobile et Safari 5.1.1.
Tableau de compatibilité: https://developer.mozilla.org/en/CSS/hyphens#AutoCompatibilityTable
Pour assurer la compatibilité avec IE 8+ utilisation:
Voir ici http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
Tout ce que j'avais à faire était de les appliquer à la style de la div conteneur avec une largeur définie.
Utiliser cette
Si vous avez ce -
simplement passer à un format vertical contenant des divs et l'utilisation min-width dans votre CSS au lieu de largeur -
Bien sûr, si vous êtes en affichage de véritables tableaux de données, il est ok pour l'utilisation d'une table, car il est sémantiquement correct et informer les gens utilisent des lecteurs d'écran qui est censé être dans un tableau. C'est leur utilisation pour la mise en page générale ou d'une image de découpage que les gens lynch pour vous.
J'ai dû faire la suite car, si les propriétés n'ont pas été déclarées dans le bon ordre, il serait aléatoire de casser les mots au mauvais endroit et sans l'ajout d'un trait d'union.
Posté par Enigmo: https://stackoverflow.com/a/14191114
Ouais, si il est possible de définir une largeur absolue et réglage
overflow : auto
fonctionne bien."word-wrap: break-word" fonctionne dans Firefox 3.5
http://hacks.mozilla.org/2009/06/word-wrap/
Ajouter à
css
de votre div:word-wrap: break-word;
après tout, la parole des enveloppements et des pauses,
préserver votre débordement et voir si cela résout votre problème. changez simplement div d'affichage de:
display: inline;
Une fonction simple (nécessite underscore.js) -- basé sur @porneL réponse
J'ai écrit une fonction qui fonctionne très bien où il insère
­
x lettres dans le mot pour la bonne ligne de rupture. Toutes les réponses ici ne prennent pas en charge tous les navigateurs et les appareils, mais cela fonctionne bien en utilisant PHP: