hsz hsz - 6 months ago 40
CSS Question

Separate sentence to one word per line

Is it possible to separate sentence to one word per line with CSS ?

Input:

<div>Hello world foo bar</div>


Rendered output:

Hello
world
foo
bar


Setting width to for example
1px
is not desired.

Answer

You have to use display:table-caption; to achieve this.

Here is the solution.

WORKING DEMO

The HTML:

<div>Hello world foo bar</div>

The CSS:

div{display:table-caption;}

Hope this helps.

Comments