1. Home
  2. Computing & Technology
  3. Web Design / HTML
Jennifer Kyrnin
Jennifer's Web Design / HTML Blog

By Jennifer Kyrnin, About.com Guide to Web Design / HTML

Reader Question: How to reduce line length?

Friday June 27, 2008

Question?
dznrmike asks:

I floated an image to the left with text on the right side of the image. The text goes all the way to the right side of the container. How can I reduce the length of the line of text?

---

I put a <br> after each line where I wanted it to end. It seems to have worked but will it cause other problems?

My Thoughts
The easiest way to reduce line lengths of text is to put the text inside a container that is sized to the width you want. Because Mike has set his text to wrap around an image, that image will need to be in the container as well. So, in this case Mike might write:

<p style="width:600px;">
<img src="image.gif" alt="image" style="float:left;" />
This is my text that will fill up the rest of the space in my paragraph that is 600px wide. If my image is 400px wide, then there is 200px on the right remaining for text.</p>

Notice that all I did was set a width style on the paragraph that surrounded the image and text. However, if there were multiple paragraphs of text that I wanted to shorten the line length, then I'd need to use a <div> tag around all of them:

<div style="width:600px;">
<p><img src="image.gif" alt="image" /> The text first paragraph.</p>
<p>The text second paragraph.....</p>
</div>

As for using multiple <br /> tags - this isn't a good idea. It's not how they were intended to be used in Web design, and they can cause problems, especially when your readers change the font size in their browser. Forced line breaks can make text illegible when the font size changes.

Other Ways to Affect Line Length

How do you manage your line lengths?
Do you think about line lengths and scan lines when you're building Web pages? What do you think is a good line length? Why not let us know by posting in the comments or answering Mike's post.

Comments
June 30, 2008 at 3:48 am
(1) Riann says:

the examples you give here are the ones I usually work with. I think a line should be about 40 – 60 chars at maximum. Longer lines are not really comfortable to read.

June 30, 2008 at 12:30 pm
(2) Ollie says:

I think putting the width within the style sheet would be much better practice than putting it as an inline style…

Leave a Comment

Line and paragraph breaks are automatic. Some HTML allowed: <a href="" title="">, <b>, <i>, <strike>

Explore Web Design / HTML
About.com Special Features

The Best Web Trends of the Decade

A look back at the best innovations, ideas and technologies over the last 10 years, More >

Family Tech Center

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >

  1. Home
  2. Computing & Technology
  3. Web Design / HTML

©2010 About.com, a part of The New York Times Company.

All rights reserved.