CSS può forzare un'interruzione di riga dopo ogni parola in un elemento?

Sto costruendo un sito multilingue, con il proprietario che mi aiuta con alcune traduzioni. Alcune delle frasi visualizzate richiedono interruzioni di riga per mantenere lo stile del sito.

Sfortunatamente, il proprietario non è un ragazzo di computer, quindi se vede foo<br />barc'è la possibilità che modificherà i dati in qualche modo mentre sta traducendo.

Esiste una soluzione CSS (oltre a modificare la larghezza) da applicare a un elemento che si spezzerebbe dopo ogni parola?

(So ​​di poterlo fare in PHP, ma mi chiedo se esiste un trucco ingegnoso che non conosco nei CSS per realizzare la stessa cosa, forse nelle funzionalità di CJK.)

MODIFICARE

Proverò a rappresentare ciò che sta accadendo:

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

La parola lunga si spezza automaticamente, la parola breve no. Voglio che assomigli a questo:

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

Uso

.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;
}

dove <parent-width>è la larghezza dell'elemento genitore (o un valore alto arbitrario che non rientra in una riga). In questo modo puoi essere sicuro che c'è anche un'interruzione di riga dopo una singola lettera. Funziona con Chrome / FF / Opera / IE7 + (e probabilmente anche IE6 poiché supporta anche la spaziatura delle parole).

La risposta fornita da @HursVanBloob funziona solo con un contenitore padre a larghezza fissa, ma non riesce in caso di contenitori larghezza fluido .

Ho provato molte proprietà, ma nulla ha funzionato come previsto. Alla fine sono giunto alla conclusione che dare word-spacingun valore enorme funziona perfettamente.

p { word-spacing: 9999999px; }

oppure, per i browser moderni è possibile utilizzare l' vwunità CSS (larghezza visiva in% della dimensione dello schermo).

p { word-spacing: 100vw; }

Una soluzione alternativa è descritta sulla frase separata per una parola per riga , applicando display:table-caption;all'elemento

Prova a usare white-space: pre-line;. Crea un'interruzione di riga ovunque venga visualizzata un'interruzione di riga nel codice, ma ignora gli spazi bianchi extra (tabulazioni e spazi ecc.).

Innanzitutto, scrivi le tue parole su righe separate nel tuo codice:

<div>Short
Word</div>

Quindi applica lo stile all'elemento che contiene le parole.

div { white-space: pre-line; }

Fai attenzione , ogni interruzione di riga nel codice all'interno dell'elemento creerà un'interruzione di riga. Quindi la scrittura di quanto segue comporterà un'interruzione di riga aggiuntiva prima della prima parola e dopo l'ultima parola:

<div>
    Short
    Word
</div>

C'è un ottimo articolo su Trucchi CSS che spiega gli altri attributi degli spazi bianchi.

Se vuoi essere in grado di scegliere tra diverse soluzioni, oltre alle risposte fornite ...

Un metodo alternativo è quello di dare al contenitore una larghezza di 0 e assicurarsi che l'overflow sia visibile. Quindi ogni parola traboverà da essa e sarà sulla sua stessa riga.

div {
  width: 0;
  overflow: visible;
}

<div>Short Word</div>
<hr>
<div>Gargantuan Word</div>

Oppure puoi usare uno di quei widthvalori appena proposti , purché esistano ancora quando leggi questo.

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>

Non puoi scegliere come target ogni parola nei CSS. Tuttavia, con un po 'di jQuery probabilmente potresti.

Con jQuery puoi racchiudere ogni parola in a <span>e quindi impostare CSS span sudisplay:block cui inserirla su una propria riga.

In teoria ovviamente: P

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

Per coloro che cercano una soluzione che funzioni all'interno di un contenitore padre flessibile con un figlio flessibile in entrambe le dimensioni. per esempio. pulsanti della barra di navigazione.

//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;
}

Ho affrontato lo stesso problema e nessuna delle opzioni qui mi ha aiutato. Alcuni servizi di posta non supportano stili specifici. Ecco la mia versione, che ha risolto il problema e funziona ovunque ho controllato:

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

O usando CSS:

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

La migliore soluzione è la word-spacingproprietà.

Aggiungi <p>in un contenitore con una dimensione specifica (esempio 300px) e dopo aver aggiunto quella dimensione come valore nella spaziatura di parole.

HTML

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

CSS

div {
 width: 300px;
}

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

In questo modo, la tua frase sarà sempre spezzata e impostata in una colonna, ma il punto del paragrafo sarà dinamico.

Ecco un esempio Codepen

Nel mio caso,

    word-break: break-all;

ha funzionato alla perfezione, spero che aiuti qualsiasi altro nuovo arrivato come me.