Blockquote styling question

You check for blockquote in your style.css file and see how it is laid out. If you want it narrower, then set the width to a percentage or px number that matches the width of your post area….oh, wait. You want the poem to be as wide as the longest sentence in the poem? Yikes.

I haven’t yet heard of a way to do that. By default, you set the container “width” and then the text goes to the margin and then wraps. If you want to avoid things like:

Jack and Jill ran
up the hill
to fetch a pail
of water…

Then we have some problems.

I know you can set the text to indent on the first line in your CSS (style.css) but I don’t know how to indent a second line if it wraps around, if it is even possible.

Okay, I did some searching on Google and I found this as a possibility:

.indenttext {padding-left: 2em; }
.indenttext:first-line{margin-left: -2em; }

You’d have to set your paragraph into a div such as this:

<div class="indenttext">Jack and Jill......</div>

And it “might” work. The first part of the style creates a padding, but the second style says to move the first line back to the margin (minus) and then indent the rest.

Try that.

I’d put it in a better div, like:

<blockquote class="indenttext">Jack and Jill....</div>

now that I think about it. This would put it in a blockquote but would allow it to have the first line back at the margin….oh, darn, we can’t edit our posts any more and I think I might have screwed up.

What you want might work like this:

Jack and Jill ran
up the hill
To fetch a pail
of water

And so what you are doing is formating the <p> and not just the blockquote or indenttext. So the better layout, though a pain in the buns (and please someone jump in here to help make this better) would be:

<blockquote class="indenttext"><p>Jack and Jill ran up the hill</p>
<p>to fetch a pail of water</p>
<p>Jack fell down.......</blockquote>

And the style sheet would look something like this:

blockquote .indenttext {padding-left: 2em; }
blockquote p.indenttext:first-line{margin-left: -2em; }

I’m fishing but start playing around with this, if I’m on the right track. This is a challenge.

Sorry for the above example of how it should look. There should have been a TAB feeling on the second line of each poem line. I hate that I can’t go back and edit the post! So instead of having the breaks return to the left margin, the first line would be on the left margin and the wrapped second line would be indented.

Is that clear? I hope so.