CSS Line Wrapping

CSS line wrapping

There's a CSS3 property called word-break that may be of some use to you in future.

More information is available here: http://www.css3.com/css-word-break/

The break-all value looks to do the thing you're asking for:

Useful where content contains a majority of Asian character set content, to which this value behaves like ‘normal’. Non-Asian character set content may be arbitrarily broken across lines.

As for more supported versions of CSS, I don't believe there's a way you can do this.

Avoiding line wrapping unless necessary with CSS

Simply make s2 (or, optionally, both s1 and s2) an inline block:

#s2 {
    display: inline-block;
}

This allows the entire s2 box to flow on the same line as s1 when there's sufficient space, before wrapping as described in your second point, and then its contents as described in your third point (because the inline block then behaves like your container block element when resizing and wrapping its contents). This is detailed in the spec in case you're interested.

Updated fiddle

Wrap a text within only two lines inside div

Limiting output to two lines of text is possible with CSS, if you set the line-height and height of the element, and set overflow:hidden;:

#someDiv {
    line-height: 1.5em;
    height: 3em;       /* height is 2x line-height, so two lines will display */
    overflow: hidden;  /* prevents extra lines from being visible */
}

--- jsFiddle DEMO ---

Alternatively, you can use the CSS text-overflow and white-space properties to add ellipses, but this only appears to work for a single line.

#someDiv {
    line-height: 1.5em;
    height: 3em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
}

And a demo:

--- jsFiddle DEMO ---

Achieving both multiple lines of text and ellipses appears to be the realm of javascript.

How to apply a line wrap/continuation style and code formatting with css

Here is one (unpleasant) way of doing this. It requires a number of bad practices. But SO is about solutions to real problems so here we go...

First each line needs to be wrapped in some sort of containing block. Span or p are probably the most appropriate.

Then the style of the containing block needs to have line height set. and a background image that contains a number of newLine glyphs at the start of every line except the first one. As this is code it would be resonable to expect it to not wrap more than 5 times. So repeating 5 times is probably enoygh.

This can then be set as the background image, and should display at the beginning of every line except the first one. I guess the resulting CSS might look like this:

p.codeLine
{
    font-size: 12px;
    line-height: 12px;
    font-family: Monospace;
    background: transparent url(lineGlyph) no-repeat 0 12px; /* move the background down so it starts on line 2 */
    padding-left: 6px; /* move the text over so we can see the newline glyph*/
}

Line height of wrapping text in list items

Remove the line-height from the <a> inside your <li>s and put it on the <li>s instead, then use margin-top and margin-bottom for the margin between the <li>s and use the line-height for the line-height of single <li>s

(making the hover state of the <a>s there bold also makes the menu jump when hovering cause it no longer always fits on 1 line)

CSS override line-height on word wrap

Line-height is supposed to set the spacing between lines (particularly, when they wrap). What you're probably looking for is margin on the li object. If you set the line-height to the smaller value that you want when the lines wrap and set the margin to the value that you want in between the items, you should be good to go.

See if this does what you want:

li {
    padding: 10px 0 0 0;
    margin: 30px 0;
    line-height: 10px;
}

Can you apply CSS only on text that is wrapped, i.e. the second and subsequent lines?

Yeah, sort of — I’d suggest combining padding-left and text-indent:

HTML

<div class="test">
    <label for="2question1">
        <input type="checkbox" id="2question1" name="2question" title="Merknaam 1" /> Very long text which is wrapped on the next line
    </label><br>

    <label for="2question2">
        <input type="checkbox" id="2question2" name="2question" title="Merknaam 2" /> Merknaam 2
    </label><br>

    <label for="2question3">
        <input type="checkbox" id="2question3" name="2question" title="Merknaam 3" /> Merknaam 3
    </label><br>

    <label for="2question4">
        <input type="checkbox" id="2question4" name="2question" title="Merknaam 4" /> Merknaam 4
    </label><br>
</div>

 CSS

.test {
    width:200px;
}

.test label {
    display: block;
    padding-left: 1em;
    text-indent: -1em;
}

text-indent applies only to the first line of text in a block-level element, so it should achieve what you want.

See http://jsfiddle.net/pauldwaite/qUvvv/

---

Related Topics