Câu riêng biệt cho một từ trên mỗi dòng

Question

Có thể tách câu thành một từ trên mỗi dòng bằng CSS không?

Input:

<div>Hello world foo bar</div> 

rendered đầu ra:

Hello 
world 
foo 
bar 

Setting chiều rộng để ví dụ 1px không được mong muốn.

Answer 1

Bạn phải sử dụng display:table-caption; để đạt được điều này.

Đây là giải pháp.

WORKING DEMO

HTML:

<div>Hello world foo bar</div> 

CSS:

div{display:table-caption;} 

Hope this helps.

Answer 2

Bạn có thể thiết lập độ rộng của div để 1px, điều này sẽ đặt mỗi từ trên một dòng mới

div { 
    width:1px; 
} 

http://jsfiddle.net/KjX4N/

Answer 3

Câu trả lời của Nathan sử dụng table-caption gần như chính xác nhưng bỏ sót một vấn đề chính trong câu đó chỉ thực sự chia cho từ dài nhất dẫn đến nhóm các từ ngắn hơn.

Ví dụ câu sau:

lừa này nhóm và chia tách các từ trong câu dựa vào từ dài nhất.

thực sự dẫn đến kết quả sau. Lưu ý nhóm trên in a và on the ở đầu ra.

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

Bạn thực sự có thể làm điều đó rất dễ dàng bằng cách thiết lập word-spacing trong đó có excellent support.

Sử dụng mà bạn có thể xuất bản án một cách chính xác như sau:

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

Dưới đây là một ví dụ mã làm việc bạn có thể chạy.

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>