O CSS pode forçar uma quebra de linha após cada palavra em um elemento?

Estou construindo um site multilíngue, com o proprietário me ajudando com algumas traduções. Algumas das frases exibidas precisam de quebras de linha para manter o estilo do site.

Infelizmente, o proprietário não é um cara de computador; portanto, se ele vir foo<br />bara chance de modificar os dados de alguma forma, enquanto estiver traduzindo.

Existe uma solução CSS (além de alterar a largura) a ser aplicada a um elemento que seria interrompido após cada palavra?

(Eu sei que posso fazer isso em PHP, mas estou me perguntando se há um truque bacana que eu não conheça em CSS para realizar a mesma coisa, talvez nos recursos do CJK.)

EDITAR

Vou tentar diagramar o que está acontecendo:

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

A palavra longa quebra automaticamente, a palavra curta não. Eu quero que fique assim:

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

Usar

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

onde <parent-width>é a largura do elemento pai (ou um valor alto arbitrário que não cabe em uma linha). Dessa forma, você pode ter certeza de que há até uma quebra de linha após uma única letra. Funciona com Chrome / FF / Opera / IE7 + (e provavelmente até o IE6, pois também suporta espaçamento de palavras).

A resposta dada por @HursVanBloob funciona apenas com contêiner pai de largura fixa, mas falha no caso de contêineres de largura de fluido .

Eu tentei muitas propriedades, mas nada funcionou como esperado. Finalmente, cheguei à conclusão de que atribuir word-spacingum valor muito alto funciona perfeitamente bem.

p { word-spacing: 9999999px; }

ou, para os navegadores modernos, você pode usar a vwunidade CSS (largura visual em% do tamanho da tela).

p { word-spacing: 100vw; }

Uma solução alternativa é descrita na frase separada para uma palavra por linha , aplicando display:table-caption;ao elemento

Tente usar white-space: pre-line;. Ele cria uma quebra de linha sempre que uma quebra de linha aparece no código, mas ignora o espaço em branco extra (guias e espaços etc.).

Primeiro, escreva suas palavras em linhas separadas no seu código:

<div>Short
Word</div>

Em seguida, aplique o estilo ao elemento que contém as palavras.

div { white-space: pre-line; }

Tenha cuidado , porém, toda quebra de linha no código dentro do elemento criará uma quebra de linha. Assim, escrever o seguinte resultará em uma quebra de linha extra antes da primeira palavra e depois da última:

<div>
    Short
    Word
</div>

Há um ótimo artigo sobre truques de CSS que explica os outros atributos de espaço em branco.

Se você quiser escolher entre diferentes soluções, além das respostas fornecidas ...

Um método alternativo é fornecer ao contêiner uma largura de 0 e garantir que o estouro seja visível. Então cada palavra transbordará e estará em sua própria linha.

div {
  width: 0;
  overflow: visible;
}

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

Ou você pode usar um desses widthvalores recém-propostos , desde que eles ainda existam quando você ler isso.

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>

Você não pode segmentar cada palavra em CSS. No entanto, com um pouco de jQuery você provavelmente poderia.

Com o jQuery, você pode agrupar cada palavra em um <span>período de CSS definido e display:blockcolocá-lo em sua própria linha.

Em teoria, é claro: P

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

Para quem procura uma solução que funcione dentro de um contêiner pai flexível com filhos flexíveis nas duas dimensões. por exemplo. botões da barra de navegação.

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

Eu enfrentei o mesmo problema e nenhuma das opções aqui me ajudou. Alguns serviços de email não oferecem suporte a estilos especificados. Aqui está a minha versão, que resolveu o problema e funciona em todos os lugares que verifiquei:

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

OU usando CSS:

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

A melhor solução é a word-spacingpropriedade.

Adicione o <p>em um contêiner com um tamanho específico (exemplo 300px) e depois você precisará adicionar esse tamanho como o valor no espaçamento entre palavras.

HTML

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

CSS

div {
 width: 300px;
}

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

Dessa forma, sua sentença será sempre quebrada e definida em uma coluna, mas a parte do parágrafo será dinâmica.

Aqui um exemplo Codepen

No meu caso,

    word-break: break-all;

funcionou perfeitamente, espero que ajude qualquer outro iniciante como eu.