Comment envelopper de longues lignes sans espaces dans le HTML?
Si un utilisateur tape dans une longue ligne sans espaces ou en blanc, il va casser le formatage en allant plus large que l'élément courant. Quelque chose comme:
HAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHA.............................................................................................................................................
J'ai essayé tout à l'aide de wordwrap()
en PHP, mais le problème c'est que si il y a un lien ou autre code HTML valide, il se casse.
Il semble y avoir quelques options dans le CSS, mais aucun d'eux ne fonctionne dans tous les navigateurs. Voir word-wrap dans IE.
Comment résoudre ce problème?
- Cette question vient de tomber en panne de google Chrome, TOUS les onglets. Première fois. Pourquoi est-ce que les premiers pas d'emballage?!
- compte tenu de chrome est censé gérer les onglets de manière indépendante, y compris en panne, vous pourriez compte tenu de la signaler comme un bug à l'équipe de Google.
- +1 pour l'appel de SORTE que le personnel. On dirait qu'ils l'ont fixé. 🙂
Vous devez vous connecter pour publier un commentaire.
Je n'ai personnellement pas utilisé, mais Hyphenator semble prometteur.
Aussi voir (éventuellement en double) questions:
en CSS3:
J'ai essayé de résoudre le même problème et j'ai trouvé de solution ici:
http://perishablepress.com/press/2010/06/01/wrapping-content/
Solution: ajouter à l'contenant les propriétés CSS suivantes
L'idée est de les utiliser tout ce que vous obtenez la meilleure compatibilité inter-navigateur
Espère que cette aide
J'aime utiliser les
overflow: auto
propriété CSS/valeur de couplage. Cela rendra l'objet parent de la façon que vous attendez qu'il apparaisse. Si le texte à l'intérieur de la mère est trop large, les barres de défilement apparaissent à l'intérieur de l'objet lui-même. Cela permet de garder la structure de la façon dont vous voulez qu'il ressemble et offrent au spectateur la possibilité de défiler pour voir plus.Edit: la bonne chose à propos
overflow: auto
par rapport àoverflow: scroll
est qu'avecauto
, les barres de défilement ne s'affichent que si débordement il y a du contenu. Avecscroll
, les barres de défilement sont toujours visibles.overflow: auto
est-il des correctifs IE6 compensation des questions si vous avez imbriqué des flotteurs.Je suis surpris que personne n'a mentionné l'un de mes préférés des solutions à ce problème, le
<wbr>
(en option saut de ligne) de la balise. Il est assez bien pris en charge dans les navigateurs et essentiellement indique au navigateur qu'il peut insérer un saut de ligne si nécessaire. Il y a aussi l'largeur zéro caractère d'espace,​
avec la même signification.Pour le cas d'utilisation mentionnées, l'affichage des commentaires de l'utilisateur sur une page web, je suppose qu'il y a déjà un certain formatage de sortie pour éviter les attaques par injection, etc. Donc, il est très simple d'ajouter ces
<wbr>
les balises de chaqueN
caractères dans les mots qui sont trop longues, ou dans les liens.Ceci est particulièrement utile lorsque vous avez besoin de contrôler le format de sortie, le CSS ne fonctionne pas toujours vous permettre de faire.
Je mettrais le post dans un div qui aurait fixe, réglage de la largeur de dépassement de défilement (ou de tout cacher en fonction du contenu).
donc, comme:
Mais c'est juste moi.
EDIT: Comme cLFlaVA points... il est préférable d'utiliser
auto
puisscroll
. Je suis d'accord avec lui.Il n'est pas "parfait" HTML/CSS solution.
Les solutions de cacher le dépassement de capacité (c'est à dire de défilement ou juste caché) ou à développer pour s'adapter. Il n'y a pas de magie.
Q: Comment pouvez-vous vous adapter à une 100cm de large d'un objet dans un espace de seulement 99cm large?
Un: Vous ne pouvez pas.
Vous pouvez lire break-word
MODIFIER
S'il vous plaît vérifier cette solution
Comment appliquer un wrap ligne/la poursuite de style et de code de mise en forme avec css
ou
Comment éviter les longs mots de casser mon div?
J'esquive le problème de ne pas avoir ma barre latérale de droite fixe comme ça 😛
Voici ce que je fais dans ASP.NET:
J'ai regardé d'autres CSS façons de le faire, mais je n'ai pas trouver quelque chose qui a travaillé croix-navigateur.
basé sur Jon suggestion le code que j'ai créé:
Je ne voulais pas ajouter les bibliothèques de mes pages juste pour lexicale.
Ensuite, j'ai écrit une fonction simple qui je fournis ci-dessous, espérons que cela aide les gens.
(C'est la rupture de 15 caractères, et l'application de "& timide;" entre les deux, mais vous pouvez le changer facilement dans le code)
Ajouter le Zéro de la largeur de l'espace (
​
) à la chaîne et il s'occupera de l'emballage.Ici est un Javacript exemple:
J'ai posté une solution qui utilise du JavaScript et d'une Expression Régulière simple de briser long mot de sorte qu'il peut être enveloppé sans casser la présentation de votre site web.
Enveloppez les longues lignes à l'aide de CSS et de JavaScript
Je sais que c'est un très vieux problème et depuis que j'ai eu le même problème, j'ai cherché une solution facile.
Comme mentionné dans le premier post, j'ai décidé d'utiliser le php et la fonction wordwrap.
Voir l'exemple de code suivant pour plus d'informations 😉
Espère que cette aide.
table
(pun intended).