web-dev-qa-db-fra.com

CSS peut-il forcer un saut de ligne après chaque mot d'un élément?

Je construis un site multilingue, avec le propriétaire qui m'aide avec quelques traductions. Certaines phrases affichées nécessitent des sauts de ligne pour conserver le style du site.

Malheureusement, le propriétaire n'est pas un informaticien, donc s'il voit foo<br />bar, il risque de modifier les données d'une manière ou d'une autre pendant la traduction.

Existe-t-il une solution CSS (en plus de changer la largeur) à appliquer à un élément qui se briserait après chaque mot?

(Je sais que je peux le faire en PHP, mais je me demande s'il existe une astuce intéressante que je ne connais pas dans CSS pour accomplir la même chose, peut-être dans les fonctionnalités de CJK.)

EDIT

Je vais essayer de schématiser ce qui se passe:

----------------          ----------------
| Short Word   |          | Gargantuan   |
|              |          | Word         |
----------------          ----------------

Le long mot se casse automatiquement, le court ne le fait pas. Je veux que ça ressemble à ça:

----------------          ----------------
| Short        |          | Gargantuan   |
| Word         |          | Word         |
----------------          ----------------
cssline-breaks
137
Ben

Utilisation

.one-Word-per-line {
    Word-spacing: <parent-width>; 
} 
.your-classname{
   width: min-intrinsic;
   width: -webkit-min-content;
   width: -moz-min-content;
   width: min-content;
   display: table-caption;
   display: -ms-grid;
   -ms-grid-columns: min-content;
 }

où <parent-width> est la largeur de l'élément parent (ou une valeur élevée arbitraire qui ne rentre pas dans une ligne). De cette façon, vous pouvez être sûr qu'il y a même un saut de ligne après une seule lettre. Fonctionne avec Chrome/FF/Opera/IE7 + (et probablement même IE6 puisqu'il prend également en charge l'espacement des mots).

242
Hurs van Bloob

La réponse donnée par @HursVanBloob ne fonctionne qu'avec un conteneur parent de largeur fixe, mais échoue en cas de conteneurs de largeur de fluide.

J'ai essayé beaucoup de propriétés, mais rien n'a fonctionné comme prévu. Enfin, je suis arrivé à la conclusion que donner Word-spacing une très grande valeur fonctionne parfaitement.

p { Word-spacing: 9999999px; }

ou, pour les navigateurs modernes, vous pouvez utiliser l'unité CSS vw (largeur visuelle en% de la taille de l'écran).

p { Word-spacing: 100vw; }
94
Deepak Yadav

Une solution alternative est décrite sur Séparer la phrase en un mot par ligne , en appliquant display:table-caption; à l'élément

33
malcomio

Essayez d’utiliser white-space: pre-line;. Il crée un saut de ligne partout où un saut de ligne apparaît dans le code, mais ignore les espaces supplémentaires (onglets et espaces, etc.).

Commencez par écrire vos mots sur des lignes séparées dans votre code:

<div>Short
Word</div>

Appliquez ensuite le style à l'élément contenant les mots.

div { white-space: pre-line; }

Faites attention cependant, chaque saut de ligne dans le code à l'intérieur de l'élément créera un saut de ligne. Par conséquent, l'écriture de ce qui suit entraînera un saut de ligne supplémentaire avant le premier mot et après le dernier mot:

<div>
    Short
    Word
</div>

Il existe un excellent article sur astuces CSS expliquant les autres attributs d'espace blanc.

31
Nass

Si vous voulez pouvoir choisir parmi différentes solutions, en plus des réponses données ...

Une autre méthode consiste à donner au conteneur une largeur de 0 et à s'assurer que le débordement est visible. Alors chaque mot en débordera et sera sur sa propre ligne.

div {
  width: 0;
  overflow: visible;
}
<div>Short Word</div>
<hr>
<div>Gargantuan Word</div>

Ou vous pouvez utiliser l’une de ces nouvelles valeurs width récemment proposées, à condition que celles-ci existent toujours au moment où vous les lisez.

div {
  width: min-intrinsic;       /* old Chrome, Safari */
  width: -webkit-min-content; /* less old Chrome, Safari */
  width: -moz-min-content;    /* current Firefox */
  width: min-content;         /* current Chrome, Safari; not IE or Edge */
}
<div>Short Word</div>
<hr>
<div>Gargantuan Word</div>
6
Mr Lister

Vous ne pouvez pas cibler chaque mot en CSS. Cependant, avec un peu de jQuery, vous pourriez probablement.

Avec jQuery, vous pouvez envelopper chaque mot dans un <span> puis un ensemble CSS à display:block, ce qui le placerait sur sa propre ligne.

En théorie bien sûr: P

4
Mark

https://jsfiddle.net/bm3Lfcod/1/

Pour ceux qui recherchent une solution qui fonctionne dans un conteneur parent flexible avec un enfant qui est flexible dans les deux dimensions. par exemple. boutons de la barre de navigation.

//the parent (example of what it may be)
div {
  display:flex;
  width: 100%;
}

//The children
a {
  display: inline-block;
}

//text wrapper
span {
  display: table-caption;
}
1
Onza

La meilleure solution est la propriété Word-spacing.

Ajoutez le <p> dans un conteneur de taille spécifique (par exemple 300px) et vous devrez ensuite l'ajouter comme valeur dans l'espacement des mots.

HTML

<div>
 <p>Sentence Here</p>
</div>

CSS

div {
 width: 300px;
}

p {
 width: auto;
 text-align: center;
 Word-spacing: 300px;
}

De cette façon, votre phrase sera toujours cassée et placée dans une colonne, mais le avec du paragraphe sera dynamique.

Voici un exemple Codepen

1
Cosimo wiSe

J'ai rencontré le même problème et aucune des options ici ne m'a aidé. Certains services de messagerie ne prennent pas en charge les styles spécifiés. Voici ma version, qui résout le problème et fonctionne partout où j'ai vérifié:

<table>
    <tr>
        <td width="1">Gargantuan Word</td>
    </tr>
</table>

OU en utilisant CSS:

<table>
    <tr>
        <td style="width:1px">Gargantuan Word</td>
    </tr>
</table>
1
eep