text-indent problem

[davikokar]

Hallo i have a text section that look roughfly like this:


...blablablablablbl blabla b lablab lb
...blal b labslbdb lablblabl bal bl
...b lablablbalblbalb ba lbal babalb
...abl blablabl blb blablbal blba lb

The text is sometimes long it will go in a new line:

...blablablablablbl blabla b lablab lb
...blal b labslbdb lablblabl bal bl
...b lablablbalblbalb ba lbal b
abalb
...abl blablabl blb blablbal blba lb

I would like to be indented like this:

...blablablablablbl blabla b lablab lb
...blal b labslbdb lablblabl bal bl
...b lablablbalblbalb ba lbal b
abalb
...abl blablabl blb blablbal blba lb

I tried with this code:

<span style="text-indent:-20px;">...blablablablablbl blabla b lablab lb</span><br />
<span style="text-indent:-20px;">...blal b labslbdb lablblabl bal bl</span><br />
<span style="text-indent:-20px;">...b lablablbalblbalb ba lbal b abalb</span><br />

but it makes the job only for the first line and with the others doesn't work... Does someone know how to reach the aim? thanks

 

[ThomasJSmart]

<blockquote>
...blablablablablbl blabla b lablab lb
...blal b labslbdb lablblabl bal bl
...b lablablbalblbalb ba lbal b
   abalb
...abl blablabl blb blablbal blba lb
</blockquote>

I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!

 

[ChrisHirst]

only the first line of of any element will have text-indent applied to it.

span is an inline element, to make your example work use block elements <p> or <div> rather than <span>



Chris.

Indifference will be the downfall of mankind, but who cares?

http://www.candsdesign.co.uk

A website that proves the cobblers kids adage.

http://www.cram-system.com

Nightclub counting systems

So long, and thanks for all the fish.

 

[ChrisHunt]

Hmmm... You have a series of one-line bits of text, like a poem, say, that you want to push over to the right by a set amount.

Try this:

<p style="margin-left: 20px>
Beautiful railway bridge of the sivery Tay<br>
Alas I am most sorry to say<br>
That ninety lives have been taken away<br>
On the last sabbath day of 1879</br>
Which will be remembered for a very long time
</p>

Of course, you could (and should) use a seperate style sheet to apply the CSS to each paragraph.

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

 

[ThomasJSmart]

>only the first line of of any element will have text-indent applied to it.

what do you mean?

<blockquote>
blablablablablbl blabla b lablab lb<br>
blal b labslbdb lablblabl bal bl<br>
b lablablbalblbalb ba lbal b<br>
abalb<br>
abl blablabl blb blablbal blba lb
</blockquote>

produces
this when tested:

blablablablablbl blabla b lablab lb
blal b labslbdb lablblabl bal bl
b lablablbalblbalb ba lbal b
abalb
abl blablabl blb blablbal blba lb

seems to be what he wants....

I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!

 

[ChrisHirst]

not quite. <blockquote> is a preformatted display, what it has effectively is a preset padding-left to the whole element not a text-indent applicable to a single line.

The original post asked for a means of having a line that if it is wider than the containing element, it will get indented when it overflows to a second line now that I read it correctly. Which I don't think is possible using CSS.
However it may be possible using some javascript.


Chris.

Indifference will be the downfall of mankind, but who cares?

http://www.candsdesign.co.uk

A website that proves the cobblers kids adage.

http://www.cram-system.com

Nightclub counting systems

So long, and thanks for all the fish.

 

[BillyRayPreachersSon]

It can be done with CSS, but you have to be crafty about it.

There is "first-line" pseudo class, but unfortunately, that cannot have spacing (margin, padding, etc) applied to it. There is also a "first-letter" pseudo class that can, however, have margin CSS applied.

As the first letter will always be on the first line, we can indent all lines, and then "outdent" (un-indent?) the first line only. This works for me in IE 6, NN 7.1, Mozilla 1.5, and Firefox 0.9 (haven't tested in Safari):

<html>
<head>
	<style type="text/css">
		.indentedReturns {
			margin-left: 20px;
		}
		.indentedReturns:first-letter {
			margin-left: -20px;
		}
	</style>
</head>
<body>
	<div class="indentedReturns">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam eleifend dui fermentum tellus.</div><br />
	<div class="indentedReturns">Phasellus felis augue, suscipit eget, sodales et, fringilla a, elit. Morbi et turpis. Nullam enim sapien, aliquam in, facilisis vel, laoreet quis, felis.</div><br />
	<div class="indentedReturns">Nullam wisi enim, adipiscing ut, ultricies vitae, sollicitudin at, erat.</div><br />
	<div class="indentedReturns">Pellentesque sapien. Donec in purus ultrices est nonummy pulvinar. Ut ac nunc et nisl imperdiet fermentum. Donec lobortis neque sit amet augue. Duis blandit.</div><br />
	<div class="indentedReturns">Suspendisse potenti. Morbi auctor quam pretium quam.</div><br />
</body>
</html>

Hope this helps,
Dan

 

[ChrisHunt]

I don't think you have to be quite that crafty, this works too:

.indentedReturns {
   margin-left: 20px;
   text-indent: -20px;
}

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

 

[ThomasJSmart]

lol, the bigger the problem the easier the solution...

I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!