Pouvez CSS forcer un saut de ligne après chaque mot dans un élément?

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 de la chance, 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 long des césures automatiquement, le mot n'est pas. Je veux qu'elle ressemble à ceci:

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

En HTML, les éléments ne pause après chaque mot, lorsque la largeur d'un élément donné l'exige. Voulez-vous dire dans les mots?
Non, j'ai besoin d'une solution qui n'est pas basé sur la fixation de la largeur. Le problème est que certaines phrases sont plus longues et pause automatiquement (comme vous le décrivez) et certaines phrases sont plus courtes et ne se cassent pas, faire des incohérences dans la présentation.
Oui, c'est comme vous décrire exactement. De ne pas nuire à la mise en page vraiment, mais il pourrait regarder mieux.
vous pouvez utiliser word-spacing mais il aurait une incidence sur tous les mots.. je Pense que vous ne pouvez pas obtenir autour de wraping ces mots dans les éléments span.
Ressemble à ça, merci pour la pensée

InformationsquelleAutor Ben | 2010-11-18

css line-breaks

241

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 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 ainsi).
- c'est en fait un travail de répondre à l'OP de la question!
- Cela m'a aussi aidé
- C'est certainement la meilleure réponse à mon humble avis
- Vous sir méritent un vote.
- Belle approche, merci!
- Jusqu'-vote bien mérité! J'ai même commencé à utiliser cette avec inline-block non des éléments de texte, il fonctionne de la même manière claire:droit des œuvres pour les éléments flottants. Vraiment utile si jamais vous avez besoin de centrer aligner à certains de ses éléments, mais ne peut pas utiliser les propriétés display:block margin: 0 auto; combinaison.
- Il échoue sur la boussole de préprocesseur, un moyen de définir une valeur?
- La réponse est très difficile à interpréter, mais il signifie: .parent { word-spacing: 100px; } où 100px est la largeur de l'élément parent. Le problème est que cette solution ne fonctionne pas si vous avez un fluide parent.
- C'est une astuce bien! +1!
- Il suffit d'assigner une valeur très élevée pour l'espacement des mots tels que word-spacing: 100000px et vous n'aurez pas à vous soucier de l'être-parent fluide en termes de largeur. Définition d'un mot de l'espacement de 100% aurait fait sens (il aurait été de 100% de la société mère de largeur), mais les valeurs exprimées en pourcentage ne sont pas pris en charge pour cette propriété css.
- Cela a été très utile. Je l'ai utilisé dans une réaction de la situation, dans laquelle la largeur de je veux de texte dans les onglets à l'enveloppe de sorte qu'ils sont tous de la même hauteur: word-spacing: 2em; et à un mobile largeur je veux qu'ils soient une seule ligne: word-spacing: unset;
- Au lieu d'utiliser un nombre arbitrairement grand sur word-spacing, essayez de définir le max-width pour parent largeur ainsi. Cela a bien fonctionné pour moi. .one-word-per-line { max-width; <parent-width>; word-spacing: <parent-width>; }
- Ce qui est étonnant. À partir des années dans le futur, merci beaucoup 🙂
- quelqu'un donner un exemple sur jsfiddle
InformationsquelleAutor Hurs van Bloob
92

La réponse donnée par @HursVanBloob fonctionne uniquement avec une largeur fixe de conteneur parent, mais échoue dans le cas de fluide de la largeur des conteneurs.

J'ai essayé beaucoup de propriétés, mais rien n'a fonctionné comme prévu. Finalement, je suis parvenu à la conclusion que le fait de donner word-spacing une très grande valeur fonctionne parfaitement bien.
```
p { word-spacing: 9999999px; }
```
ou, pour les navigateurs modernes vous pouvez utiliser le CSS vw unité (largeur visuelle en % de la taille de l'écran).
```
p { word-spacing: 100vw; }
```
- c'est ce que je vais essayer de le faire!
- C'est une excellente solution!
- Rapide, sale facile; de ce fait le travail.
- oui ! d'accord
- Complètement en rupture avec   bien.
- pouah... hacks comme ces me rappeler pourquoi je déteste css
- Eh bien, il ne fonctionne pas pour moi qui fait que le liquide de la largeur du conteneur aller très très haut.
- pouvez-vous partager un violon lien, montrant votre problème?
- href="https://jsfiddle.net/bm3Lfcod/" >jsfiddle.net/bm3Lfcod
- il ne fonctionne pas de cette façon. Vous devez définir une width vos parents papier d'emballage ou de votre contenu de l'emballage. Le texte corrigé de travail est donc d'apporter à votre prochain mot sur la nouvelle ligne, mais aussi en utilisant l'espace disponible à cause de text-indent: long value;. Vous devrez définir un width-limit à elle. Il est difficile de trouver dans le monde réel de l'utilisation de votre scénario. Si vous avez width alors pourquoi diviser le texte.
- Oui j'ai pensé, j'ai posté une solution sur le fond pour que tout cas ça fonctionne pour les autres, désolé, je doit l'ai mentionné plus tôt.
- il fonctionne sur les navigateurs modernes, mais sera la cause d'un problème sur IE11 sur win7
InformationsquelleAutor Deepak Yadav
31

Une solution alternative est décrite sur Autre phrase à un seul mot par ligne, en appliquant display:table-caption; à l'élément
- C'est en fait uniquement les groupes de mots en fonction de la largeur du plus long mot.
- Même si cela peut regrouper des mots sur une ligne, il fonctionne vraiment bien dans beaucoup de situations et de ne pas se sentir hacky comme le massif de l'espacement des mots de l'option.
- C'est le seul qui a fonctionné parfaitement pour moi, joli!
- Il ne donne aucun résultat
InformationsquelleAutor malcomio
30

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 etc.).

Tout d'abord, écrire vos mots sur des lignes distinctes dans votre code:
```
<div>Short
Word</div>
```
Puis d'appliquer le style à l'élément contenant les mots.
```
div { white-space: pre-line; }
```
Être prudent, mais, 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 la CSS Astuces expliquant l'autre blanc-espace d'attributs.
- Vous devez expliquer comment white-space peut être utilisé pour répondre à la question. Désolé, mais je ne vois pas comment.
- Bien l'article sur CSS Astuces explique complètement, alors j'ai pensé à un lien serait suffisant, plutôt que d'essayer de régurgiter la réponse ici.
- Ok, donc vous suggérer de mettre des sauts de ligne dans le source, et d'utiliser le CSS "white-space: pre;" pour afficher les sauts de ligne comme un <pre> tag ferait ? Qui pourrait fonctionner, et un saut de ligne devrait regarder de plus naturel pour les traducteurs que <br />. Je vais essayer de modifier votre réponse à ajouter 🙂
- Exactement. Eh bien, en fait, white-space: pre-line; serait probablement plus approprié, car il ignore les espaces superflus dans votre code. Je vais mettre à jour la réponse.
- Bon, peut-être juste ajouter white-space: pre; pour IE 7.
- +1 j'ai un champ de texte à l'intérieur d'une boîte, qui est centré. avec white-space: pre-ine cela fonctionne très bien, alors qu'il ne fonctionne pas avec word-spacing. merci pour l'astuce.
InformationsquelleAutor Nass
5

Si vous voulez être en mesure de choisir parmi les différentes solutions, en plus de la donnée réponses...

Une autre méthode consiste à donner le conteneur d'une largeur de 0 et assurez-vous que le trop-plein est visible. Ensuite, chaque mot de débordement hors de lui et sera sur sa propre ligne.

CSS:
```
div {
  width: 0;
  overflow: visible;
}
```
HTML:
```
<div>Short Word</div>
<hr>
<div>Gargantuan Word</div>
```
Ou vous pouvez utiliser l'un de ceux qui ont récemment proposé width valeurs, à condition que ceux qui existent encore au moment où vous lisez ceci.

CSS:
```
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 */
}
```
HTML:
```
<div>Short Word</div>
<hr>
<div>Gargantuan Word</div>
```
InformationsquelleAutor Mr Lister
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> et puis CSS réglée à display:block qui le mettrait sur sa propre ligne.

En théorie, bien sûr 😛
- Yep, j'avais peur de ça. Pourrait le faire en PHP aussi, mais il semble comme une vilaine solution. Je pensais qu'il pourrait y avoir quelques :first-child astuce ou quelque chose du genre...
- non, les sélecteurs CSS actuellement seulement vous permettent de sélectionner des éléments HTML, pas de nœuds de texte. J'ai eu un coup d'oeil à le CSS 3 module de Texte, mais il ne semble pas être quelque chose de là que les forces d'une pause après chaque mot dans un élément. Marc solution est votre meilleur pari.
- Si l'un de vous les gars veut la rep, vous pourriez faire qu'une réponse et je vais l'accepter. Je vais marquer ce que sans réponse (pour l'instant) par meta.stackoverflow.com/questions/48013/....
- Je pense que la Marque a déjà fait une réponse, le représentant est sa aussi loin que je suis concerné.
- joueur de l'équipe de donner à l'homme un badge ou quelque chose 🙂
- Je sais! J'ai eu l'esprit Sportif, que vais le faire.
- voit le mot "jQuery"... arrête immédiatement la lecture
InformationsquelleAutor Mark
1

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

Pour ceux qui recherchent une solution qui fonctionne à l'intérieur d'un flexible conteneur parent avec des enfants qui est flexible dans les deux dimensions. par exemple. barre de navigation boutons.
```
//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;
}
```
- Essayez de donner à qui s'étendent sur toute autre CSS propriété que vous pouvez donner. Dire une propriété qui pourrait provoquer des browser reflow
- navigateur de redistribution?
InformationsquelleAutor Onza
1

J'ai été confrontée au même problème, et aucune des options ici m'a aidé. Certains services de messagerie ne prennent pas en charge spécifiée styles.
Voici ma version, qui a résolu le problème et fonctionne partout j'ai vérifié:
```
<table>
    <tr>
        <td width="1">Gargantuan Word</td>
    </tr>
</table>
```
OU à l'aide de CSS:
```
<table>
    <tr>
        <td style="width:1px">Gargantuan Word</td>
    </tr>
</table>
```
InformationsquelleAutor eep

Vous devez vous connecter pour publier un commentaire.