By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,766 Members | 1,265 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,766 IT Pros & Developers. It's quick & easy.

line wrap indent with CSS

P: n/a
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.

Jan 26 '07 #1
Share this Question
Share on Google+
5 Replies


P: n/a
Rik
<ji*********@gmail.comwrote:
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?
I'd write a server side script which replaces the plaintext with real <ol>
& <litags, after which it's a piece of cake.
--
Rik Wasmus
Jan 26 '07 #2

P: n/a
On 2007-01-26, ji*********@gmail.com <ji*********@gmail.comwrote:
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.
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/com...12fe377b1427b8
Jan 26 '07 #3

P: n/a
ji*********@gmail.com wrote:
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.
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.

--
-bts
-Motorcycles defy gravity; cars just suck
Jan 26 '07 #4

P: n/a
On Jan 26, 11:37 am, "Beauregard T. Shagnasty"
<a.nony.m...@example.invalidwrote:
jistanid...@gmail.com wrote:
What I want to do is force that 2nd (and any other lines below it) to
wraplike this:
1. This text goes on and on forever and eventually
it wraps to the nextline.
I tried text-indent but that does the firstline. I can't really do a
negative value there since that puts the firstlinesomewhere 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.
Thanks! This works perfectly!
--
-bts
-Motorcycles defy gravity; cars just suck
Jan 27 '07 #5

P: n/a
ji*********@gmail.com wrote:
Thanks! This works perfectly!
Glad it worked for you. I've used that style on a few pages in the past.

--
-bts
-Motorcycles defy gravity; cars just suck
Jan 27 '07 #6

This discussion thread is closed

Replies have been disabled for this discussion.