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

Je construis un site multilingue, le propriétaire m'aidant pour quelques traductions. Certaines des 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 il foo<br />bary a une chance qu'il modifie les données d'une manière ou d'une autre pendant qu'il traduit.

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 faire cela en PHP, mais je me demande s'il y a une astuce astucieuse que je ne connais pas en CSS pour accomplir la même chose, peut-être dans les fonctionnalités CJK.)

ÉDITER

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

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

Le mot long se brise automatiquement, pas le mot court. Je veux que ça ressemble à ceci:

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

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 arbitraire élevée qui ne tient 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 car il prend également en charge l'espacement des mots).

La réponse donnée par @HursVanBloob fonctionne uniquement avec le conteneur parent de largeur fixe, mais échoue dans le cas de conteneurs à largeur 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-spacingune valeur très énorme fonctionne parfaitement bien.

p { word-spacing: 9999999px; }

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

p { word-spacing: 100vw; }

Une solution alternative est décrite sur Phrase séparée à un mot par ligne , en appliquant display:table-caption;à l'élément

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 (tabulations et espaces, etc.).

Tout d'abord, écrivez 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; }

Attention cependant, chaque saut de ligne dans le code à l'intérieur de l'élément créera un saut de ligne. Donc, écrire 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 les astuces CSS expliquant les autres attributs d'espace blanc.

Si vous souhaitez 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. Ensuite, 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 widthvaleurs proposées , à condition qu'elles existent toujours au moment où vous lisez ceci.

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>

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

Avec jQuery, vous pouvez envelopper chaque mot dans un <span>intervalle de jeu CSS, puis dans display:blocklequel le placerait sur sa propre ligne.

En théorie bien sûr: P

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

Pour ceux qui recherchent une solution qui fonctionne dans un conteneur parent flexible avec un enfant 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;
}

J'ai été confronté au même problème et aucune des options proposées ici ne m'a aidé. Certains services de messagerie ne prennent pas en charge les styles spécifiés. Voici ma version, qui a résolu 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>

La meilleure solution est la word-spacingpropriété.

Ajoutez le <p>dans un conteneur avec une taille spécifique (exemple 300px) et après vous devez ajouter cette taille 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 coupée et placée dans une colonne, mais le avec du paragraphe sera dynamique.

Voici un exemple Codepen

Dans mon cas,

    word-break: break-all;

a fonctionné parfaitement, j'espère que cela aidera tout autre nouveau venu comme moi.