how to avoid empty line in pre formatting text

Question

<div id="divright">
lorem ipsum
lorem ipsum
lorem ipsum
</div>

css

#divright{
    white-space:pre;
}

There is an extra empty line at he top of divrightcontent, because of white-space:pre formatting.

How can I avoid this empty line.

I tried css display:none - doesn't work.

Boldewyn · Accepted Answer · 2016-03-24T12:17:24.700

3

If you have access to the HTML, simply delete it:

<div id="divright">lorem ipsum

If you know, that there will always be a newline and you know the line height, pull the whole element one line higher:

#divright {
  margin-top: -20px; /* -1 x current line-height */
}

The white-space-collapse property of CSS4 will last a bit, until it is ready to save us here.

For contenteditable elements, you could listen to the input event and trim away the leading line break with Javascript every time a user tries to add it.

edited Mar 24 '16 at 12:17

answered Mar 24 '16 at 12:05

Boldewyn

81,211
44
156
212

thanks but I need later to make `divright` contenteditable, so in this case cursor is hidden. – qadenza Mar 24 '16 at 12:08
1

There is a property in the pipe called `white-space-collapse`, but it won't hit browsers near you until we both look forward to retirement: http://stackoverflow.com/a/2629446/113195 – Boldewyn Mar 24 '16 at 12:11

score 0 · Answer 2 · answered Mar 24 '16 at 12:07

0

just delete the actuall space before the first line

<div id="divright">lorem ipsum
lorem ipsum
lorem ipsum
</div>

answered Mar 24 '16 at 12:07

AnatPort

748
8
20

can I delete it using javascript ? – qadenza Mar 24 '16 at 12:09
1

yes, try getting the div by id, calling trimleft in its inner html. var newtext= document.getElementById("divright").innerHTML; newtext= newdiv.trimLeft(); document.getElementById("divright").innerHTML = "newtext"; – AnatPort Mar 24 '16 at 12:23

score 0 · Answer 3 · answered Mar 24 '16 at 12:10

0

I think you should use :

#divright{
    white-space:normal;
}

or

#divright{
    white-space:nowrap;
}

It should delete this empty line. To more help look at W3C-Css Tutorial.

answered Mar 24 '16 at 12:10

Kornelia Kobiela

467
3
15

1

thanks, but there is a reason to keep `white-space:pre` – qadenza Mar 24 '16 at 12:11

how to avoid empty line in pre formatting text

3 Answers3