Search code examples
htmlcssword-wrappre

Auto break line in CSS with return symbol

I have to format a poem. the layout is responsive, but when the width decreases, and the poem container reduces his width, the poem goes out of him. I'm using wordwrap for break the lines, but I wish to mantain a continuity for the two line parts.

pre {
      word-wrap: break-word;
      white-space: -moz-pre-wrap;
      white-space: pre-wrap;
}

It's possible to make something this (adding return symbol ↵):

Cold flower heads are raining over my heart.
Oh pit of debris, fierce cave of the shipwrecked.

to

Cold flower heads are↵
raining over my heart.
Oh pit of debris, fierce↵
cave of the shipwrecked.
Solution

  • I'm afraid it's a little complicated, but you have to use somthing like this:

    HTML:

    <div class="nowrap">Cold flower heads are&nbsp;</div><div class="nowrap">raining over my heart.</div><br />
<div class="nowrap">Oh pit of debris, fierce&nbsp;</div><div class="nowrap">cave of the shipwrecked.</div>

    CSS:

    .nowrap {
    white-space:nowrap;
    float:left;
}

    Demo: http://jsfiddle.net/jaAhk/2/ (Scale it!)

    If you want to use it depends on how large the poem is, i guess.