html (+ css): dénoter un lieu 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 sépare de préférence après l’une des virgules.

Y a-t-il un moyen de dire au moteur de rendu HTML d’essayer de se briser à un endroit donné, et de le faire avant d’essayer de casser l’un des espaces, sans utiliser d’espaces ininterrompus? Si j’utilise des espaces non cassants, la largeur augmente 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é en premier avec les virgules et ne peut pas faire correspondre la ligne.

J’ai essayé d’envelopper des fragments de texte dans des éléments mais cela ne semble pas être utile.

    div.box { width: 180px; } table, table td { border: 1px solid; border-collapse: collapse; }    
lorem ipsum lorem ipsum lorem ipsum
lorem ipsum 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 lorem ipsum

note: il ressemble à l’ écriture de text-wrap: avoid CSS3 text-wrap: avoid comportement est ce que je veux, mais je n’arrive pas à le faire fonctionner.

En utilisant

 span.avoidwrap { display:inline-block; } 

et envelopper le texte que je veux être gardé ensemble

  Text  

il enveloppera d’abord dans les blocs préférés et ensuite en plus petits fragments si nécessaire.

Je préfère une solution RWD très soignée de Dan Mall . Je vais l’append ici car d’autres questions concernant les sauts de ligne réactifs sont marquées comme des doublons.
Dans votre cas, vous auriez:

 Honey Nut Cheerios, 
Wheat Chex, etc.

Et une ligne de CSS dans votre requête média:

 @media screen and (min-width: 768px) { .rwd-break { display: none; } } 

La réponse est non ( vous ne pouvez pas modifier l’algorithme de saut de ligne utilisé ).

Mais il y a des solutions de contournement (la meilleure est la réponse acceptée )

Vous pouvez vous approcher avec le non-break-space   mais seulement entre les mots qui vont ensemble ( ce que vous avez en spans, mais pas après la virgule ), ou vous pouvez utiliser l’ white-space:nowrap comme @Marcel mentionné.

Les deux solutions font la même chose et les deux ne casseront pas un groupe de mots si elles ne s’adaptent pas toutes seules.

Avec votre balisage ci-dessus, utilisez span { white-space:nowrap } . C’est aussi bon que vous pouvez vous attendre vraiment.

Nouvelle réponse maintenant, nous avons HTML5:

HTML5 introduit la . (Il signifie opportunité de rupture de mot.)

L’ajout d’un indique au navigateur de s’y retrouver avant n’importe où, il est donc facile de faire en sorte que les mots se séparent après des virgules:

 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 

Il est pris en charge tous mes principaux navigateurs, sauf IE.

Une réponse facile consiste à utiliser le caractère d’espace sans largeur Il est utilisé pour créer des espaces de rupture à l’intérieur des mots à des points spécifiques .

Exactement l’ opposé de l’ espace insécable   (enfin, en fait le mot-joiner ) (le mots est la version sans largeur de l’ espace insécable )

(Il y a aussi d’autres codes non cassants comme le trait d’union ) (voici une réponse détaillée sur différentes ‘variantes’ de nbsp )

Si vous voulez une solution HTML uniquement (sans CSS / JS), vous pouvez utiliser une combinaison d’ espace sans largeur et d’ espace insécable , mais cela serait très compliqué , et l’écriture d’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 d’e-mail n’est pas complètement standardisé, il est bon pour ce type d’utilisation car cette solution n’utilise pas de CSS / JS.

De plus, si vous l’utilisez en combinaison avec l’une des solutions basées sur , vous aurez le contrôle complet de l’ algorithme de rupture de ligne.

(note éditoriale 🙂

Le seul problème que je puisse vous voir est de changer dynamicment les points de rupture préférés. Cela nécessiterait une manipulation JS constante de la taille proportionnelle de chaque intervalle et le traitement de ces entités HTML dans le texte.

Vous pouvez simplement ajuster les parameters de marge en CSS (margin-right dans ce cas).

 text { margin-right: 20%; } 

Utilisez

au lieu de , ou spécifiez une classe pour SPAN et atsortingbuez-lui l’atsortingbut display: block .

Il y a un élément HTML pour cela ™: l’ élément (maintenant normalisé) .

Je vous conseille de l’utiliser. Cela ne fonctionnera peut-être pas partout , mais c’est ce que vous pouvez faire de mieux sans passer par des obstacles.