Disons que j'ai ce texte que je souhaite afficher dans une cellule de tableau HTML:
Honey Nut Cheerios, Wheat Chex, Grape-Nuts, Rice Krispies, Some random cereal with a very long name, Honey Bunches of Oats, Wheaties, Special K, Froot Loops, Apple Jackset je veux que la ligne se coupe préférentiellement après l'une des virgules.
Existe-t-il un moyen de dire au moteur de rendu HTML d'essayer de casser à un endroit désigné, et de le faire d'abord avant d'essayer de casser après l'un des espaces, sans utiliser d'espaces insécables? Si j'utilise des espaces insécables, cela augmente la largeur sans condition. Je veux que le saut de ligne se produise après l'un des espaces, si l'algorithme de retour à la ligne l'a essayé avec les virgules en premier et ne peut pas faire tenir la ligne.
J'ai essayé d'encapsuler des fragments de texte dans des <span>éléments mais cela ne semble rien d'utile.
<html>
<head>
<style type="text/css">
div.box { width: 180px; }
table, table td {
border: 1px solid;
border-collapse: collapse;
}
</style>
</head>
<body>
<div class="box">
<table>
<tr>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<td>lorem ipsum</td>
<td>
<span>Honey Nut Cheerios,</span>
<span>Wheat Chex,</span>
<span>Grape-Nuts,</span>
<span>Rice Krispies,</span>
<span>Some random cereal with a very long name,</span>
<span>Honey Bunches of Oats,</span>
<span>Wheaties,</span>
<span>Special K,</span>
<span>Froot Loops,</span>
<span>Apple Jacks</span>
</td>
<td>lorem ipsum</td>
</tr>
</table>
</div>
</body>
</html>Remarque: il semble que le comportement CSS3text-wrap: avoid soit ce que je veux, mais je n'arrive pas à le faire fonctionner.
Réponses:
En utilisant
et envelopper le texte dans lequel je veux rester ensemble
il s'enroulera d'abord dans les blocs préférés, puis en fragments plus petits si nécessaire.
la source
<span>Hello </span><span> world</span>seraHelloworldet<span>Hello</span> <span>world</span>sera normalHello world.<wbr>n'indique pas un endroit préféré pour rompre la ligne, mais un endroit possible .<span>s imbriqués , vous pouvez donc (en fait) spécifier une hiérarchie de points d'arrêt préférés.Il y a une solution RWD très soignée de Dan Mall que je préfère. Je vais l'ajouter ici car d'autres questions concernant les sauts de ligne réactifs sont marquées comme des doublons de celle-ci.
Dans votre cas, vous auriez:
Et une ligne de CSS dans votre requête multimédia:
la source
Une réponse simple est d'utiliser le caractère d'espacement de largeur nulle.
​Il est utilisé pour créer des espaces de rupture à l'intérieur de mots à des points spécifiques .Est-ce exactement l'opposé de l' espace insécable
(enfin, en fait le mot-joiner⁠) ( word-joiner est la version de largeur nulle de l' espace insécable )(il existe également d'autres codes insécables comme le trait d'union insécable
‑) (voici une réponse détaillée sur différentes `` variantes '' de nbsp )Si vous voulez une solution HTML uniquement (pas de CSS / JS), vous pouvez utiliser une combinaison de l' espace de largeur zéro et de l' espace insécable , mais ce serait vraiment compliqué , et l'écriture d'une version lisible par l'homme nécessite un petit effort .
ctrl+ c, ctrl+ vaide
exemple:
illisible? c'est le même HTML sans balises de commentaire:
Cependant, comme le rendu html des e-mails n'est pas complètement standardisé, c'est bon pour ce type d'utilisation puisque cette solution n'utilise pas de CSS / JS
De plus, si vous l'utilisez en combinaison avec l'une des
<span>solutions basées sur la base de données, vous aurez un contrôle complet de l' algorithme de saut de ligne(note éditoriale :)
Le seul problème que je pourrais vous voir avoir est si vous vouliez changer dynamiquement les points de rupture préférés. Cela nécessiterait une manipulation JS constante de chacune des tailles proportionnelles de travées et la manipulation de ces entités HTML dans le texte.
la source
La réponse est non ( vous ne pouvez pas modifier l'algorithme de saut de ligne utilisé ).
Mais il existe quelques solutions de contournement (la meilleure est la réponse acceptée )
Vous pouvez vous approcher avec l'espace insécable
mais uniquement entre les mots qui vont ensemble ( ce que vous avez dans les travées, mais pas après la virgule ), ou vous pouvez utiliser lewhite-space:nowrapcomme @Marcel mentionné.Les deux solutions font la même chose et les deux ne briseront pas un groupe de mots si elles ne rentrent pas toutes seules.
la source
Avec votre majoration ci-dessus, utilisez
span { white-space:nowrap }. C'est aussi bon que vous pouvez vous y attendre.la source
spanélément et empêche les espaces de se casser du tout. Je veux juste décourager le moteur de rendu de se faufiler entre l'un de mes éléments, mais s'il le faut, je veux qu'il le fasse. <wbr>ce différent d'un espace? D'après ce que je peux dire, les choix sont soit qu'un personnage donné autorise ou non une pause. Ainsi, '-' et '' et​et<wbr>et­permettent tous une pause (impression d'un trait d'union, d'un espace, de rien, de rien et d'un trait d'union uniquement sur pause, respectivement), alors que ce n'est pas le cas.Nouvelle réponse maintenant nous avons HTML5:
HTML5 introduit la
<wbr>balise. (Cela signifie Word Break Opportunity.)L'ajout d'un
<wbr>indique au navigateur de s'y arrêter avant tout autre endroit, il est donc facile de faire casser les mots après des virgules:Il est pris en charge par tous mes principaux navigateurs à l'exception d'IE.
la source
<wbr>a un autre but. Sans oublier que cette réponse est le double d'une réponse qui existait bien avant.<wbr>met juste en place une opportunité de pause; il ne «dit pas au navigateur de s'y arrêter avant tout autre endroit». Utilisé avant un espace, il est normalement inutile, car les espaces sont normalement des opportunités de saut de ligne.<wbr>ne donne pas la priorité à un saut de ligne par rapport aux espaces blancs ordinaires. L'emballage se produit donc normalement dans l'exemple.Vous pouvez simplement ajuster les paramètres de marge dans CSS (marge droite dans ce cas).
la source
Utilisez à la
<div>place de<span>, ou spécifiez une classe pour SPAN et donnez-lui l' attribut display: block .la source
Il existe un élément HTML pour cela ™: l'
<wbr>élément (désormais standardisé) .Je vous conseillerais de l'utiliser. Cela ne fonctionne peut-être pas partout , mais c'est le mieux que vous puissiez faire sans passer par des cerceaux.
la source
<wbr>sert à marquer des points d'arrêt sur des mots très longs, cela ne résout pas le problème des sauts de ligne préféréswbrélément représente une opportunité de saut de ligne." C'est exactement ce que OP a demandé. Arrêtez de voter contre les gens en fonction de ce que vous lisez sur les wikis.<wbr>.