Oddzielne zdanie na jedno słowo w wierszu

Question

Czy można oddzielić zdanie od słowa w CSS?

Wejście:

<div>Hello world foo bar</div> 

Przedstawiane wyjściowa:

Hello 
world 
foo 
bar 

Ustawienie szerokości do np 1px nie jest pożądane.

Answer 1

Musisz użyć display:table-caption; do osiągnięcia tego celu.

Oto rozwiązanie.

WORKING DEMO

HTML:

<div>Hello world foo bar</div> 

CSS:

div{display:table-caption;} 

Nadzieja to pomaga.

Answer 2

Można ustawić szerokość div do 1px, to wprowadzi każde słowo na nowej linii

div { 
    width:1px; 
} 

http://jsfiddle.net/KjX4N/

Answer 3

Odpowiedź Nathana z użyciem table-caption jest prawie poprawna, ale pomija kluczową kwestię, ponieważ zdanie jest dzielone tylko przez najdłuższe słowo, które powoduje grupowanie krótszych słów.

Na przykład następujące zdanie:

Ta sztuczka grup i dzieli wyrazy w zdaniu na podstawie najdłuższego słowa.

faktycznie wynik w następującym wyniku. Zwróć uwagę na grupowanie na in a i on the w danych wyjściowych.

This 
trick 
groups 
and 
splits 
words 
in a 
sentence 
based 
on the 
longest 
word. 

Rzeczywiście można to zrobić bardzo łatwo przez ustawienie word-spacing który ma excellent support.

Korzystanie że można wyprowadzać zdanie poprawnie następująco:

This 
trick 
groups 
and 
splits 
words 
in 
a 
sentence 
based 
on 
the 
longest 
word. 

Oto przykład kodu roboczego można uruchomić.

Snippet

p { 
 
    word-spacing: 9999rem; 
 
} 
 
p ~ p { 
 
    /* Undo last assignment */ 
 
    word-spacing: unset; 
 
    display: table-caption; 
 
}

<h3>word-spacing</h3> 
 
<p> 
 
    This trick splits each word in a sentence 
 
</p> 
 
<hr/> 
 
<h3>table-caption</h3> 
 
<p> 
 
    This trick groups and splits words in a sentence based on the longest word. 
 
</p>