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

salto de linea usando css

Question

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 dueño no es un chico de la computadora, así que si él ve la foo<br />bar existe 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á pasando:

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

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

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

Answer 1

Intenta usar white-space: pre-line; . Crea un salto de línea donde aparece un salto de línea en el código, pero ignora el espacio en blanco adicional (pestañas y espacios, etc.).

Primero, escribe tus palabras en líneas separadas en tu código:

<div>Short
Word</div>

Luego aplica el estilo al elemento que contiene las palabras.

div { white-space: pre-line; }

Tenga cuidado , cada salto de línea en el código dentro del elemento creará un salto de línea. Así que 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 excelente artículo sobre CSS Tricks que explica los otros atributos del espacio en blanco.

Answer 2

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

Intenté muchas propiedades, pero nada funcionó como se esperaba. Finalmente, llegué a la conclusión de que word-spacing un gran valor a las word-spacing funciona perfectamente bien.

p { word-spacing: 9999999px; }

o, para los navegadores modernos, puede usar la unidad CSS vw (ancho visual en% del tamaño de la pantalla).

p { word-spacing: 100vw; }

Answer 3

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

Con jQuery puede envolver cada palabra en un <span> y luego establecer CSS para display:block que lo pondría en su propia línea.

En teoría, por supuesto: P

Answer 4

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

Un método alternativo es dar 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 los valores de width recientemente propuestos, siempre que aún existan para cuando lo lea.

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>

Answer 5

Una solución alternativa se describe en Frase separada a una palabra por línea , mediante la aplicación display:table-caption; al elemento

Answer 6

Utilizar

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

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

Answer 7

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

Para aquellos que buscan una solución que funcione dentro de un contenedor principal flexible con un hijo 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;
}