limit width of text in HTML

Post Reply
Peter_w
Posts: 28
Joined: Tue Aug 19, 2008 9:28 am

limit width of text in HTML

Post by Peter_w »

Hello,

How can I limit the width of text in HTML.

I tried

Code: Select all

<pre width=80>
But it doesn't do it
chris
Site Admin
Posts: 194
Joined: Mon Jul 21, 2008 9:52 am

Re: limit width of text in HTML

Post by chris »

You can use

Code: Select all

<p style="max-width:200px;">text</p>
or just

Code: Select all

<p style="width:200px;">text</p>
But it won't convert the newlines to breaks likes <pre> does.
Peter_w
Posts: 28
Joined: Tue Aug 19, 2008 9:28 am

Re: limit width of text in HTML

Post by Peter_w »

No that doesn't work either.

It's the really long words that are the problem, for example, a lot of b's:

bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

How do I make it split in several parts?

Edit:
there are actually more b's then you can see here.
the board stops showing them,
But I want them all, but split over several lines.

Thanks
chris
Site Admin
Posts: 194
Joined: Mon Jul 21, 2008 9:52 am

Re: limit width of text in HTML

Post by chris »

Well,

the board uses CSS -> overflow: hidden.
Example:

Code: Select all

<div style="width=200;overflow:hidden;">text</div>
You might want to use scroll instead

Code: Select all

<div style="width=100%;overflow:scroll;">text</div>
text-overflow in CSS3 seams to be promising, but it isn't supported by many browsers yet

I don't know a way in HTML or CSS to split words.
If you really want to do it, it's best you do it on the server before sending the HTML page.

Like the function wordwrap in PHP:

Code: Select all

$newtext = wordwrap($text, 20, "<br />\n");
chris
Site Admin
Posts: 194
Joined: Mon Jul 21, 2008 9:52 am

Re: limit width of text in HTML

Post by chris »

I did a few test and the width=100% only works well in opera.

Internet Explorer and firefox seam to have problems with it.
To be sure use absolute value's:

Code: Select all

<div style="width=600;overflow:scroll;">text</div>
Post Reply