html (+ css): indiquant un endroit préféré pour un saut de ligne


109

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 Jacks

et 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.


vous pouvez utiliser des espaces insécables à l'intérieur des travées.
Gabriele Petrioli

3
Mais je ne veux pas utiliser non des espaces de coupure de contact. J'adorerais utiliser des espaces "ne-veux-casser-ici-mais-je-veux-si-je-dois", mais pour autant que je sache, ceux-ci existent.
Jason S

@Jason .. je te sens .. mais ce n'est pas possible .. a ajouté une réponse.
Gabriele Petrioli

drat, c'est ce qui se passe lorsque les informaticiens écrivent des algorithmes de rendu sans contribution des typographes.
Jason S

1
vous devriez accepter la réponse de @ EggertJóhannesson car elle fournit une bonne solution de contournement!
Gabriele Petrioli

Réponses:


156

En utilisant

span.avoidwrap { display:inline-block; }

et envelopper le texte dans lequel je veux rester ensemble

<span class="avoidwrap"> Text </span>

il s'enroulera d'abord dans les blocs préférés, puis en fragments plus petits si nécessaire.


16
Fonctionne très bien! Juste une remarque supplémentaire: les espaces au début et à la fin d'un bloc en ligne sont ignorés, de sorte que pour délimiter le texte en blocs par un espace, vous devez le placer entre des blocs en ligne. Par exemple, si les travées ont été conçues pour devenir des blocs en ligne, alors ce <span>Hello </span><span> world</span>sera Helloworldet <span>Hello</span> <span>world</span>sera normal Hello world.
utilisateur

2
<wbr> est plus sémantique et laisse le contrôle dans le navigateur, ce qui est généralement une bonne chose. Dans ce cas, cela rend possible la rupture quand elle est vitale.
Lodewijk

Fonctionne très bien - quand c'est important, que les caractères comme "-" ne se cassent pas. Exemple: Perikles <span class = "avoidwrap"> (um & nbsp; 500-429 & nbsp; v.Chr.) </span>
Sarah Trees

10
@Lodewijk: <wbr>n'indique pas un endroit préféré pour rompre la ligne, mais un endroit possible .
Dan Dascalescu

1
Notez que cette technique fonctionne également pour les <span>s imbriqués , vous pouvez donc (en fait) spécifier une hiérarchie de points d'arrêt préférés.
Michael Dyck

24

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:

<span>Honey Nut Cheerios, <br class="rwd-break">Wheat Chex, etc.</span>

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

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

7

Une réponse simple est d'utiliser le caractère d'espacement de largeur nulle. &#8203; 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 &nbsp; (enfin, en fait le mot-joiner &#8288; ) ( 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 &#8209; ) (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:

   Honey&nbsp;Nut&nbsp;Cheerios,<!---->&#8203;<!--
-->Wheat&nbsp;Chex,<!---->&#8203;<!--
-->Grape&#8209;Nuts,<!---->&#8203;<!--
-->Rice&nbsp;Krispies,<!---->&#8203;<!--
-->Some&nbsp;random&nbsp;cereal&nbsp;with&nbsp;a&nbsp;very&nbsp;long&nbsp;name,<!---->&#8203;<!--
-->Honey&nbsp;Bunches&nbsp;of&nbsp;Oats,<!---->&#8203;<!--
-->Wheaties,<!---->&#8203;<!--
-->Special&nbsp;K,<!---->&#8203;<!--
-->Froot&nbsp;Loops,<!---->&#8203;<!--
-->Apple&nbsp;Jacks

illisible? c'est le même HTML sans balises de commentaire:

   Honey&nbsp;Nut&nbsp;Cheerios,&#8203;Wheat&nbsp;Chex,&#8203;Grape&#8209;Nuts,&#8203;Rice&nbsp;Krispies,&#8203;Some&nbsp;random&nbsp;cereal&nbsp;with&nbsp;a&nbsp;very&nbsp;long&nbsp;name,&#8203;Honey&nbsp;Bunches&nbsp;of&nbsp;Oats,&#8203;Wheaties,&#8203;Special&nbsp;K,&#8203;Froot&nbsp;Loops,&#8203;Apple&nbsp;Jacks

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.


1
que sont les hacks span?
Jason S

Les autres réponses tirant parti des balises span.

Je tiens également à noter que même si cette solution ne semble pas être la plus simple, elle est la plus fiable, car ces entités ne changent pas et ne devraient pas changer souvent la représentation sémantique dans les navigateurs, les analyseurs de courrier électronique ou tout autre analyseur HTML.

3

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 &nbsp;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 le white-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.


argh. :-( ça pue, cela signifie que je dois vivre avec, ou que je dois essayer de détecter les longues lignes par moi-même pour tenter de vaincre l'algorithme de saut de ligne.
Jason S

J'ai modifié votre réponse pour fournir un lien vers la solution de contournement, car je n'ai presque pas continué à lire à cause de la façon dont votre première ligne est formulée.
arootbeer

@arootbeer: Je soutiens votre modification, mais Gaby l'a annulée. Gaby: pourquoi? Voulez-vous induire les utilisateurs en erreur?
Dan Dascalescu

@DanDascalescu, est-ce que toutes les réponses sont SO doivent être modifiées pour pointer vers la réponse acceptée dans la même page? Ma réponse a 1 ( somme ) vote et il y a une réponse acceptée avec 48 voix. Je suis presque sûr que celui qui est accepté est celui qui retient l'attention ( et à juste titre ). En plus de cela, j'insiste sur le fait qu'il n'y a pas moyen de changer l'algorithme de rupture utilisé ( comme le demande l'OP )
Gabriele Petrioli

1
check ma solution utilise votre propre logique contre vous. combinez cela avec l'une des solutions de portée, vous aurez alors un contrôle complet de l'algorithme de

2

Avec votre majoration ci-dessus, utilisez span { white-space:nowrap }. C'est aussi bon que vous pouvez vous y attendre.


Merci, mais cela ne fonctionnera pas car cela traduit essentiellement les espaces dans un spanélément &nbsp;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.
Jason S

@Jason S: J'ai ajouté d'autres options à ma réponse.
Marcel

en quoi est- &nbsp;<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 &#8203;et <wbr>et &shy;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 &nbsp;n'est pas le cas.
Jason S

@Jason S: Ajout d'exemple d'utilisation.
Marcel

Je viens de l'essayer, et cela ne semble pas avoir la priorité sur les espaces pour les sauts de ligne. La priorité est ce dont j'ai besoin. Si le comportement de rupture pour un caractère ou un élément différent est oui ou non, alors il n'y a pas de solution à mon problème. S'il y a des priorités de rupture de ligne relatives, alors je pourrais avoir une solution.
Jason S

1

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:

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 mes principaux navigateurs à l'exception d'IE.


12
-1. Pourquoi n'avez-vous pas testé avant de conseiller? Ça ne marche pas. <wbr>a un autre but. Sans oublier que cette réponse est le double d'une réponse qui existait bien avant.
utilisateur


13
<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.
Jukka K. Korpela

5
Cela ne fonctionne pas du tout, dans aucun navigateur. La réponse est fausse: <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.
adrian le

3
Pour clarifier, <wbr> est destiné à signaler "voici un endroit où vous pouvez casser", alors que cette position serait autrement considérée à l' intérieur d'un mot . Il dit "traiter la tache entre ces deux personnages comme s'il y avait un espace là-bas", pas "préfère casser ici". S'il y a déjà un espace, <wbr> n'a aucune signification.
Point

-1

Vous pouvez simplement ajuster les paramètres de marge dans CSS (marge droite dans ce cas).

text {
    margin-right: 20%;
}

-3

Utilisez à la <div>place de <span>, ou spécifiez une classe pour SPAN et donnez-lui l' attribut display: block .


-5

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.


3
-1: <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és
utilisateur

4
@ user3075942 Citation directe de la spécification : "L' wbré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.
Mathias Bynens

3
Oui, opportunité . Mais les navigateurs ont déjà la possibilité de casser des espaces. La question est de savoir comment dire à un navigateur dans quels espaces il est préférable de casser.
utilisateur

1
… Et la réponse est d'utiliser <wbr>.
Mathias Bynens

8
Non, ce n’est pas la réponse. Cela n'augmente pas la probabilité d'utilisation d'une posibilité de point de rupture préexistante particulière; il ajoute seulement une nouvelle posibilité de point de rupture, là où il n'en existe pas déjà. Avoir deux posibilités d'affilée ne sert à rien. developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr
Torin Finnemann
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.