html (+ css): désignant un endroit préféré pour un saut de ligne
Disons que j'ai ce texte que je veux 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 Jacks
et je veux que la ligne se casse de préférence 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 avant d'essayer de casser après l'un des espaces, sans en utilisant des espaces insécables? Si j'utilise des espaces insécables, cela augmente la largeur sans condition. I want le saut de ligne doit se produire après l'un des espaces, si l'algorithme de retour à la ligne l'a essayé avec les virgules en premier et ne parvient pas à faire correspondre la ligne.
J'ai essayé d'encapsuler des fragments de texte dans <span> éléments mais cela ne semble rien faire 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 ressemble à la CSS3 text-wrap: avoid le comportement est ce que je veux, mais je n'arrive pas à le faire fonctionner.
En utilisant
span.avoidwrap { display:inline-block; }
et en enveloppant le texte dans lequel je veux rester ensemble
<span class="avoidwrap"> Text </span>
il s'enroulera d'abord dans des blocs préférés, puis dans des fragments plus petits selon les besoins.
Il y a une solution RWD très soignée de Dan Mall que je préfère. Je vais l'ajouter ici car certaines autres questions concernant les sauts de ligne réactifs sont marquées comme des doublons de celui-ci.
Dans votre cas, vous auriez:
<span>Honey Nut Cheerios, <br class="rwd-break">Wheat Chex, etc.</span>
Et une ligne de CSS dans votre requête média:
@media screen and (min-width: 768px) {
.rwd-break { display: none; }
}
Une réponse simple consiste à utiliser le caractère espace de largeur nulle ​ Il est utilisé pour créer des espaces de pause à l'intérieur des mots à des points spécifiques.
Est-ce que exactement l'opposé de espace insécable (enfin, en fait le Word-joiner ⁠) ( Word-joiner est la version à largeur nulle de espace insécable)
(il existe également d'autres codes insécables comme le tiret insécable ‑) (voici une réponse complète sur différentes 'variantes' de nbsp)
Si vous voulez une solution HTML uniquement (pas de CSS/JS), vous pouvez utiliser une combinaison de espace de largeur nulle et espace insécable, mais ce serait vraiment désordonné, et écrire une version lisible par l'homme nécessite un petit effort.
ctrl + c, ctrl + v aide
exemple:
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 Jacks
illisible? c'est le même HTML sans balises de commentaire:
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 Jacks
Cependant, comme le rendu html des e-mails n'est pas complètement standardisé, son bon pour ce type d'utilisation puisque cette solution utilise pas CSS/JS
De plus, si vous l'utilisez en combinaison avec l'un des <span>-based solutions, vous aurez un contrôle total sur l'algorithme saut de ligne
(note éditoriale:)
Le seul problème que je pouvais vous voir 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 des étendues et la gestion de ces entités HTML dans le texte.
La réponse est non ( Vous ne pouvez pas modifier l'algorithme de saut de ligne utilisé).
Mais il existe quelques solutions ( la meilleure est la réponse acceptée)
Vous pouvez vous approcher de l'espace insécable mais seulement entre les mots qui vont ensemble ( ce que vous avez dans les travées, mais pas après la virgule), ou vous pouvez utiliser le white-space:nowrap comme @Marcel l'a mentionné.
Les deux solutions font la même chose, et les deux ne briseront pas un groupe de mots s'il ne tient pas tout seul.
Avec votre majoration ci-dessus, utilisez span { white-space:nowrap }. C'est aussi bon que vous pouvez vraiment vous y attendre.
Nouvelle réponse maintenant nous avons HTML5:
HTML5 présente le <wbr> tag. (Cela signifie Word Break Opportunity.)
Ajout d'un <wbr> indique au navigateur de s'arrêter là avant n'importe où ailleurs, il est donc facile de faire rompre les mots après des virgules:
Honey Nut Cheerios,<wbr> Wheat Chex,<wbr> Grape-Nuts,<wbr> Rice Krispies,<wbr> Some random cereal with a very long name,<wbr> Honey Bunches of Oats,<wbr> Wheaties,<wbr> Special K,<wbr> Froot Loops,<wbr> Apple Jacks
Il est pris en charge par tous les principaux navigateurs, à l'exception d'IE.