Fixed Width Span, Without Inline Block

Question

I may be trying to do something impossible; I am working on a site that displays poetry. I would like poetic lines to both have numbers on the left-hand side; and to wrap properly for poetry (that is, to have sort of hanging indent). I have achieved that using:

a p which contains both the line-number and the text of the line of poetry; I use text-indent and padding-left applied to paragraphs of this class to create the sort of indentation I need.
a span for the line number (to style it differently);
a span for the content of the line of poetry itself.

It is works the way I want (you can see an example here), except when the line number transitions from single to double digits, it bumps the indentation of the text of the line of poetry (look at lines 9 and 10 in the linked example).

The most obvious (and, I fear, only) solution is to make my span containing the line number in the an inline-block; but this breaks the desired indentation behavior I want. If I try to apply the padding-left/text-indent onto the text of the line of poetry itself, that means the line-number and line-text are separate blocks, and so they don't stay together when the line wraps (leaving the line number on a line by itself). Is there a way to achieve what I want (line numbers that align properly without breaking the desired indentation behavior) using HTML and CSS? I am open to restructuring things, but would prefer to avoid a whole slew of JS. (As I write this, it occurs to me: could I just insert a non-breaking space after single digits numbers?)

Many thanks.

What about using an ordered list with numbers as the prefix, and just place every line of the pome into a new <li> tag. You'd have the numbering you want automatically and can use css to do more aligning without messing up the numbers. — Shilly
– Shilly, Commented Sep 21, 2015 at 14:56
Hate to say it, but this might be a job for tables. You want horizontal and vertical alignment for the line numbers, otherwise I'd suggest having a single vertical div down the left hand side to contain the line numbers. — Inaimathi
– Inaimathi, Commented Sep 21, 2015 at 14:59

Ryan Fitzgerald · Accepted Answer · 2015-09-21 15:10:12Z

1

For this you would probably be best of taking advantage of ordered lists and applying the styling to list elements within it:

Take a look: http://jsfiddle.net/oohyrxz9/

The HTML (with placeholders):

<ol id="poetry">
    <li>
        <p class="poetic-line">About me young and careless feet</p>
    </li>
    <li>
        <p class="poetic-line">Linger along the garish street;</p>
    </li>
    <li>
        <p class="poetic-line indent1">Above, a hundred shouting signs</p>
    </li>
    <li>
        <p class="poetic-line">Shed down their bright fantastic glow</p>
    </li>
    <li>
        <p class="poetic-line indent1">Upon the merry crowd and lines</p>
    </li>
    <li>
        <p class="poetic-line">Of moving carriages below</p>
    </li>
    <li>
        <p class="poetic-line">Oh wonderful is Broadway—only</p>
    </li>
    <li>
        <p class="poetic-line">My heart, my heart is lonely.</p>
    </li>
    <li>
        <p class="poetic-line">Desire naked, linked with Passion,</p>
    </li>
    <li>
        <p class="poetic-line">Goes strutting by in brazen fashion;</p>
    </li>
    <li>
        <p class="poetic-line indent1">From playhouse, cabaret and inn</p>
    </li>
</ol>

Then the CSS (where you can apply custom classes):

ul#poetry li {
    padding-right: 1em; 
}

#poetry > li > p {
   margin: 0 auto; 
}

p.indent1 {
    margin-left: 1em !important;
}

edited Sep 21, 2015 at 15:10

answered Sep 21, 2015 at 15:04

Ryan Fitzgerald

4232 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

cforster Over a year ago

Thanks for this answer; I would have never thought of this... but it looks very promising. (I'm going to leave the Q open a little longer, but will probably accept this answer later.)

Ryan Fitzgerald Over a year ago

Not a problem. It definitely gives you some freedom to style how you want (additional custom indent clases, etc) while maintaining the general structure

Destination Designs · Accepted Answer · 2015-09-21 15:36:25Z

1

just as an alternate to using ordered lists as suggested, it often happens that we want a layout that has say an image, or in this example a line number to the left, and have text on the right that doesn't wrap. Because you require numbers, an ordered list makes sense here. But this would be the alternative using inline-block.

<p class="poetry">
    <span class="line">1.</span>
    <span class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</span>
</p>

and css:

.line {
    display: inline-block;
    vertical-align: top;
    width: 25px;
}

.text {
    display:inline-block;
    width: 90%;
}

fiddle

edited Sep 21, 2015 at 15:36

answered Sep 21, 2015 at 15:21

Destination Designs

6831 gold badge5 silver badges17 bronze badges

2 Comments

cforster Over a year ago

I might be missing something, but when I try to add the indentation requirements to your JSfiddle, the line numbers and text break apart (as mentioned in the original question): jsfiddle.net/vkvhpmh6/2

Destination Designs Over a year ago

"indentation requirements" if you adjust the width of the line span, you need to reduce the width of the text span

Collectives™ on Stack Overflow

Fixed Width Span, Without Inline Block

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related