Auto break line in CSS with return symbol

Question

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.

Answer 1

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.

Answer 2

You cannot add content at ends of lines in CSS. The only way to add textual content is with the content property, which does not apply to the :first-line pseudo-element.

However, the goal of indicating continuation can be achieved in a different manner: by indenting the continuation lines. For this, you would need to make each logical line of the poem an element, e.g.

<div class=poem>
<div>Cold flower heads are raining over my heart.</div>
<div>Oh pit of debris, fierce cave of the shipwrecked.</div>
</div>

And you would indent continuation lines by setting left margin and nullifying it for the first line, by setting a negative value for text-indent (which indents the first line only):

.poem > div { margin-left: 1em; text-indent: -1em; }