¿Puede CSS forzar un salto de línea después de cada palabra en un elemento?

Estoy construyendo un sitio multilingüe, con el propietario ayudándome con algunas traducciones. Algunas de las frases que se muestran necesitan saltos de línea para mantener el estilo del sitio.

Desafortunadamente, el propietario no es un tipo de computadora, por lo que si ve que foo<br />barexiste la posibilidad de que modifique los datos de alguna manera mientras está traduciendo.

¿Existe una solución CSS (además de cambiar el ancho) para aplicar a un elemento que se rompería después de cada palabra?

(Sé que puedo hacer esto en PHP, pero me pregunto si hay un truco ingenioso que no conozco en CSS para lograr lo mismo, tal vez en las características de CJK).

EDITAR

Intentaré diagramar lo que está sucediendo:

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

La palabra larga se rompe automáticamente, la palabra corta no. Quiero que se vea así:

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

Utilizar

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

donde <parent-width>es el ancho del elemento padre (o un valor alto arbitrario que no cabe en una línea). De esa manera, puede estar seguro de que incluso hay un salto de línea después de una sola letra. Funciona con Chrome / FF / Opera / IE7 + (y probablemente incluso IE6 ya que también admite el espaciado de palabras).

La respuesta dada por @HursVanBloob funciona solo con contenedores primarios de ancho fijo, pero falla en el caso de contenedores de ancho fluido .

Probé muchas propiedades, pero nada funcionó como se esperaba. Finalmente llegué a la conclusión de que dar word-spacingun valor muy grande funciona perfectamente bien.

p { word-spacing: 9999999px; }

o, para los navegadores modernos se puede utilizar el CSS vwunidad (ancho visual en% del tamaño de la pantalla).

p { word-spacing: 100vw; }

Se describe una solución alternativa en una oración separada para una palabra por línea , aplicando display:table-caption;al elemento

Intenta usar white-space: pre-line;. Crea un salto de línea siempre que aparezca un salto de línea en el código, pero ignora los espacios en blanco adicionales (pestañas y espacios, etc.).

Primero, escriba sus palabras en líneas separadas en su código:

<div>Short
Word</div>

Luego aplique el estilo al elemento que contiene las palabras.

div { white-space: pre-line; }

Sin embargo, tenga cuidado , cada salto de línea en el código dentro del elemento creará un salto de línea. Por lo tanto, escribir lo siguiente dará como resultado un salto de línea adicional antes de la primera palabra y después de la última palabra:

<div>
    Short
    Word
</div>

Hay un gran artículo sobre CSS Tricks que explica los otros atributos de espacio en blanco.

Si desea poder elegir entre diferentes soluciones, además de las respuestas dadas ...

Un método alternativo es darle al contenedor un ancho de 0 y asegurarse de que el desbordamiento sea visible. Entonces, cada palabra se desbordará y estará en su propia línea.

div {
  width: 0;
  overflow: visible;
}

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

O puede usar uno de esos widthvalores recién propuestos , siempre que aún existan para cuando lea esto.

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>

No puede orientar cada palabra en CSS. Sin embargo, con un poco de jQuery probablemente puedas.

Con jQuery puede ajustar cada palabra en <span>ay luego establecer CSS span para display:blockque lo coloque en su propia línea.

En teoría, por supuesto: P

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

Para aquellos que buscan una solución que funcione dentro de un contenedor principal flexible con un elemento secundario que sea flexible en ambas dimensiones. p.ej. botones de la barra de navegación.

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

Me enfrenté al mismo problema, y ​​ninguna de las opciones aquí me ayudó. Algunos servicios de correo no admiten estilos específicos. Aquí está mi versión, que resolvió el problema y funciona en todos los lugares que verifiqué:

<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 mejor solución es la word-spacingpropiedad.

Agregue el <p>en un contenedor con un tamaño específico (ejemplo 300px) y después de que tenga que agregar ese tamaño como el valor en el espacio entre palabras.

HTML

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

CSS

div {
 width: 300px;
}

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

De esta manera, su oración siempre se romperá y se establecerá en una columna, pero el con del párrafo será dinámico.

Aquí un ejemplo de Codepen

En mi caso,

    word-break: break-all;

funcionó a la perfección, espero que ayude a cualquier otro recién llegado como yo.