Hanging indents with specified line breaks? Options

[Woody20]

Is there is simple way to do hanging indents with specified line breaks, in HTML 4.01?

CODE

Hang: First line
      Second line
      Third line

The intent is that everything has a left margin > 0, except the first line, and the start of each line is aligned.
I know this can be done with a table, but that's more complicated than I'm looking for.
Using + and - text-indents and <br> and the end of each line doesn't work.

[pandy]

You can use a negative text-indent.

The padding on body is just to create space for the negative indent.

CODE

body     { padding-left: 5em }
p        { text-indent: -2.5em }

HTML

<p>
Hang: First line<br>
Second line<br>
Third line</p>

The problem is if you want exactly the first word to stick out and the rest of the first line to be aligned with the lines below. You can get there with trial and error for a certain font and for a known text, but if you plan to do this for many paragraphs it would be tricky.

If you just want the first line to stick out a certain amount it will work fine.

[Woody20]

You can use a negative text-indent.

As I said, I tried this method initially, but it doesn't allow you to set the line breaks where you want. The "trial-and-error" method doesn't work either, since users can vary the screen width, or font size. And even if it did work, you'd have to redo everything if you changed the text at all.

[pandy]

Why can't you set the linebreaks where you want? Because of long lines and wrapping? You can stop that.

[Christian J]

Or you could use a list:

CODE

<style type="text/css">
ul {
margin: 0;
padding: 0;
list-style: none;
}

li {
padding: 0;
margin-left: 2em;
}

li:first-child {margin-left: 0;}
</style>

<ul>
<li>li</li>
<li>li</li>
<li>li</li>
</ul>

[pandy]

I don't see what a list does that a negative indent doesn't. What am I missing now?

[Christian J]

Just thought the HTML structure might be better than BRs.

[pandy]

IF it is a structural list, sure. I didn't get the impression it was though. Don't use tables for layout, use lists instead? Vad heter "av två onda ting" på engelska?

[Christian J]

IF it is a structural list, sure. I didn't get the impression it was though.

Separate lines of text sounds like list items to me (maybe with the exception of poems, song lyrics and similar). But only the OP knows...

Vad heter "av två onda ting" på engelska?

The lesser of two evils?

[Woody20]

If you will look at the example I provided, you can see it is list-like; I control the line breaks, not the HTML interpreter. Typically, lines are short, and do not wrap, but it is possible to have longer lines. In any case, only the initial line will have the hanging indent.
The proposed list solution looks like it should work, but it's complicated, and, as written, changes all <ul>. Then we need a separate class, more complication. I was hoping for something simple, like a tab character.

[pandy]

No such thing.

What works with a list also works with a negative indentions. Use the method that's appropriate for the content. If your problem is wrapping lines, stop them from wrapping.
http://www.w3.org/TR/CSS2/text.html#propdef-white-space

[Christian J]

The proposed list solution looks like it should work, but it's complicated, and, as written, changes all <ul>. Then we need a separate class, more complication.

Actually, in definition lists the default styling in common browsers is to indent the DD elements but not the DT ones:

CODE

<dl>
<dt>name</dt>
<dd>value</dd>
<dd>value</dd>
</dl>

Can't say if this fits your content structurally/semantically. Generally it's frowned upon using structurally/semantically unsuitable HTML elements just for presentational effects (that's what CSS is for), but the description of definition lists is pretty flexible:
http://www.w3.org/TR/html401/struct/lists.html#edef-DL
http://www.w3.org/TR/html5/grouping-conten...#the-dl-element

(Side-note: http://www.blooberry.com/indexdot/html/tagpages/d/dl.htm advices against using multiple DDs with a single DT, but I don't see any support for that in the specs.)

I was hoping for something simple, like a tab character.

Tabs work with preformatted text (like the PRE element), but accessibility and semantics become less good that way.