Best way to align left after line break

css, html, line-breaks

Solution

Solution #1:

Fiddle: http://jsfiddle.net/38GpE/2/

CSS:

.pretext
{
    font-weight:bold;
    display:inline-block;
    vertical-align:top;
}

.text
{
    width:300px;
    display:inline-block;
}

HTML:

<ul>
    <li>
        <div class="pretext">Something: </div>
        <div class="text">
            ...text...
        </div>
    </li>
</ul>

The obvious problem is the `<li>` bullet point... In your example, it looks like you might be able to just use `list-style:none;` to hide the bullet, and use a `-` (minus symbol).

If that won't suffice, hiding the bullet point and positioning a `background: url(mybullet.png) no-repeat left top;` might work.

Solution #2:

Another solution using `display:table-cell`, but keep in mind this isn't supported in IE7. The benefit of this though is that you don't have to define a width of the 2nd column.

Fiddle: http://jsfiddle.net/38GpE/3/

CSS:

.pretext
{
    font-weight:bold;
    display:table-cell;
    vertical-align:top;
    white-space:nowrap;
}

.text
{
    display:table-cell;
}

Solution #3:

You said, in the comments, that you don't need to use a `<li>`. It's a pain, but could you not just define a table for each item?

Fiddle: http://jsfiddle.net/zuPcx/

HTML:

<table>
    <tr>
        <td class="pretext">Something:</td>
        <td>{your text}</td>
    </tr>
</table>

<table>
    <tr>
        <td class="pretext">Something else:</td>
        <td>{your text}</td>
    </tr>
</table>

CSS:

.pretext
{
    font-weight:bold;
    display:table-cell;
    vertical-align:top;
    white-space:nowrap;
}

.text
{
    display:table-cell;
}

Problem

As you see, I need to align text after line break. First I tried table. but as you see each item has different width(like note, humidity...). So I had to make each table to each item. I don't think it's right. And I tried this. ``` li.list { padding-left: 3.5em; text-indent: -3.5em; } ``` It seemed work but the exact `em` showed different spaces by different browsers(including mobile). Meaning that I couldn't make it compatible. I hope there's a neat and simple way to solve it..

Original source