line wrap indent with CSS

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

jistanidiot@gmail.com - 26 Jan 2007 16:02 GMT

We've got some plain text in a DB that we're pulling out and putting it
on our website.

The problem is it has some lists like this:

1. This text goes on and on forever and eventually
it wraps to the next line.

What I want to do is force that 2nd (and any other lines below it) to
wrap like this:

1. This text goes on and on forever and eventually
it wraps to the next line.

I tried text-indent but that does the first line. I can't really do a
negative value there since that puts the first line somewhere it
doesn't belong.

Does anyone have some suggestions for doing this?

Thanks in advance.

Reply to this Message

Rik - 26 Jan 2007 16:08 GMT

> We've got some plain text in a DB that we're pulling out and putting it
> on our website.
[quoted text clipped - 15 lines]
>
> Does anyone have some suggestions for doing this?

I'd write a server side script which replaces the plaintext with real <ol>
& <li> tags, after which it's a piece of cake.

Signature

Rik Wasmus

Reply to this Message

Ben C - 26 Jan 2007 16:20 GMT

> We've got some plain text in a DB that we're pulling out and putting it
> on our website.
[quoted text clipped - 17 lines]
>
> Thanks in advance.

You can put a float in the <li>, with width and height set on it, but
various aspects of this approach are a bit tricky.

This came up recently. See

http://tinyurl.com/2xlfcu

or

http://groups.google.co.uk/group/comp.infosystems.www.authoring.stylesheets/brow
se_thread/thread/4495c36ba37db48c/4c12fe377b1427b8?lnk=gst&q=%5C%5Btext%5C%5D&rn
um=16&hl=en#4c12fe377b1427b8

Reply to this Message

Beauregard T. Shagnasty - 26 Jan 2007 16:36 GMT

> What I want to do is force that 2nd (and any other lines below it) to
> wrap like this:
[quoted text clipped - 5 lines]
> negative value there since that puts the first line somewhere it
> doesn't belong.

First, give the negative margin some way to fit on the page.
<div style="margin-left: 5em;">

<p style="text-indent: -3em;">
Volutpat duis minim tation eum molestie dolor ea ut. Te dolor wisi.
Accumsan eum et consectetuer illum eu exerci nisl in euismod vulputate.
Nulla duis, in vulputate, minim odio ad, qui diam nulla at qui. Esse
quis laoreet sed, ut feugait molestie consequat iusto, in nostrud zzril
tincidunt consequat et zzril feugait ullamcorper erat euismod.
</p>

</div>
Then close the div.

Signature

-bts
-Motorcycles defy gravity; cars just suck

Reply to this Message

jistanidiot@gmail.com - 27 Jan 2007 15:42 GMT

On Jan 26, 11:37 am, "Beauregard T. Shagnasty"
<a.nony.m...@example.invalid> wrote:

> jistanid...@gmail.com wrote:
> > What I want to do is force that 2nd (and any other lines below it) to
[quoted text clipped - 18 lines]
> </div>
> Then close the div.

Thanks! This works perfectly!

> --
> -bts
> -Motorcycles defy gravity; cars just suck

Reply to this Message

Beauregard T. Shagnasty - 27 Jan 2007 16:57 GMT

> Thanks! This works perfectly!

Glad it worked for you. I've used that style on a few pages in the past.

Signature

-bts
-Motorcycles defy gravity; cars just suck

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / January 2007

line wrap indent with CSS