CODEWITHSUNDEEP
htmllayoutfont-sizeliquid-layout
hh54188
hh54188

Reputation: 15626

Large font size can't make the layout liquid

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

Upvotes: 1

Views: 143

Answers (1)

Passerby
Passerby

Reputation: 10070

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/

Upvotes: 2

Related Questions