CODEWITHSUNDEEP
css
Dan Goodspeed
Dan Goodspeed

Reputation: 3560

How to wrap text to match indentation

What is the best way to wrap text where the indentation is set by the word before it, so that any wrapped text will continue with the same indentation. Like this:

https://i.sstatic.net/jNIvI.png

I made a JSfiddle to work with as well - http://jsfiddle.net/dangoodspeed/DbYFb/1/

.left { float:left; font-weight:bold; margin-right:.5em; }

I know I can do it with a table for each line, but there has to be a better way.

Upvotes: 0

Views: 244

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105903

if you float element, give them a width and add overflow:hidden to element aside in the flow, you get it : http://jsfiddle.net/DbYFb/3/ 

.left {
    float:left;
    font-weight:bold;
    margin-right:.5em;
    width:5em;
}
.right {overflow:hidden;}

see http://css-tricks.com/all-about-floats/ for more about floatting elements :)

Upvotes: 1

Cubicle Dragon
Cubicle Dragon

Reputation: 305

This seems to produce exactly the effect you need, according to your screenshot. You said you didn't want tables. Those aren't exactly tables, just divs that behave like table cells :)

http://jsfiddle.net/DbYFb/18/

Rows are wrapped in a div that behaves normally, while both columns are given display: table-cell to get the effect you want. Whether this is a better way than using an actual table is up to you.

<div class="row">
    <div class="left">Name:</div>
    <div class="right">John Doe</div>
</div>

.row div {
    display: table-cell;
}

Upvotes: 1

Related Questions