Question

At the begin, I doesn’t set the font-size, insert a long text in div,like:

<div>Hello World Hello World Hello World Hello World Hello World Hello World</div>

if I narrow the browser,the overflow part would change to the next line;

but if I set the text font-size size to large size,like:

<div style="font-size:72px;">asdasdasasdasdasd</div>

I narrow the browser, the overflow part couldn’t change to the next line:

demo here

So why this happened? How can I fixed the problem? I want no matter how big size I set to the font-size, the layout would be liquid as normal

Answer 1

As to your demo, you didn’t give the long string any space, so generally browsers would consider it as one “word” and prefer not to split it.

To split your demo into several lines, add spaces: http://jsfiddle.net/dxXBQ/2/

Of course I believe that’s not your real content. If your real content do have long words and you still want them to wrap, use word-wrap CSS style: http://jsfiddle.net/dxXBQ/4/