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

Question

Je suis en train de construire un site multilingue, avec le propriétaire m'aider avec quelques traductions. Certains affichent des expressions de besoin des sauts de ligne pour conserver le style du site.

Malheureusement, le propriétaire n'est pas un ordinateur gars, donc si il voit foo<br />bar il y a une chance qu'il va modifier les données d'une certaine manière comme il le traduire.

Est-il un CSS solution (en plus de la modification de la largeur) pour l'appliquer à un élément qui permettrait de pause après chaque mot?

(Je sais que je peux le faire en PHP, mais je me demandais si il y a un truc astucieux je ne sais pas dans le CSS pour accomplir la même chose, peut-être dans le CJK fonctionnalités.)

MODIFIER

Je vais tenter de dessiner ce qui se passe:

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

Le mot long des pauses automatiquement, le mot n'est pas. Je veux qu'elle ressemble à ceci:

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

Answer 1

Utilisation

.one-word-per-line {
    word-spacing: <parent-width>; 
} 

où <parent-width> la largeur de l'élément parent (ou une valeur élevée arbitraire qui ne rentrent 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 c'est pour soutenir word-spacing).

Answer 2

Oui choisis la réponse qui a été Donnée par @HursVanBloob fonctionne uniquement avec une largeur fixe de conteneur parent, mais échoue dans le cas de fluide-largeur du conteneur. Personnellement, j'ai Essayé beaucoup de propriétés, mais rien n'a fonctionné comme prévu, mais pour le moment, en donnant la parole-l'espacement d'une très grande valeur a fonctionné pour moi.

   p{word-spacing: 9999999px;}

fonctionne parfaitement bien. !

Answer 3

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

Tout d'abord, écrire vos mots sur des lignes distinctes dans votre code:

<div>Short
Word</div>

Puis appliquer 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 de créer un saut de ligne. Ainsi écrit ce qui suit entraîne un supplément de saut de ligne avant le premier mot et après le dernier mot:

<div>
    Short
    Word
</div>

Il y a un grand article sur CSS Astuces expliquant l'autre blanc-espace d'attributs.

Answer 4

Vous ne pouvez pas cibler chaque mot dans le CSS. Cependant, avec un peu de jQuery vous pourrait probablement.

Avec jQuery, vous pouvez envelopper chaque mot dans un <span> puis CSS réglée à l' display:block qui le mettrait sur sa propre ligne.

En théorie, bien sûr :P