CSS white-space: pre not working as expected

Question

I have text coming back from the server containing carriage return (enter). I asked some people what to do to display this text on multiple lines, and they advised me to use the white-space: pre.

Is there any other way to display the text on multiple lines without white-space: pre? Or any way to make pre act like a paragraph but with multiple lines without having the extra padding?

Here's what I have:

.gallery-Gcontainer {
  margin: 0 !important;
  padding: 0;
}
#genericpartTitle,
.content {
  padding-left: 20px;
}
.content .sidebar,
.content section {
  display: inline-block;
  width: 30%;
  border: none;
  vertical-align: top;
}
.content .sidebar img {
  width: 200px;
}

<div class="gallery-Gcontainer">
  <div class="header-area">
    <h3 id="genericpartTitle">my page</h3>
    <hr>
  </div>
  <div class="content">
    <div class="sidebar">
      <img class="img-sidebar" src="https://static.pexels.com/photos/30738/pexels-photo-30738.jpg" />
    </div>
    <section>
      <h5 class="item-title">Welcome to my first page</h5>
      <p style="white-space: pre" class="description">
        Hello, anything will go here, text will come from the server like this, and I need to display it on multiple lines.
      </p>
    </section>
  </div>
</div>

Update: Putting: white-space: pre-line as suggested in the answers, solved the padding left issue, but still there's a big space in padding-top.

Michael Benjamin · Accepted Answer · 2016-12-11T00:43:11.127

18

Instead of white-space: pre use white-space: pre-line.

From MDN:

The white-space property

The white-space property is used to describe how whitespace inside the element is handled.

normal Sequences of whitespace are collapsed. Newline characters in the source are handled as other whitespace. Breaks lines as necessary to fill line boxes.

nowrap Collapses whitespace as for normal, but suppresses line breaks (text wrapping) within text.

pre Sequences of whitespace are preserved. Lines are only broken at newline characters in the source and at <br> elements.

pre-wrap Sequences of whitespace are preserved. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.

pre-line Sequences of whitespace are collapsed. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.

Also, the padding-top issue you mention isn't really padding. In looking at your code there appears to be at least one line break at the start of the line.

edited Dec 11 '16 at 00:43

answered Dec 10 '16 at 23:28

Michael Benjamin

346,931
104
581
701

This worked, then why do I need to use pre? as in this question: http://stackoverflow.com/questions/41050367/html-rendered-in-the-page-looks-ok-but-the-actual-result-is-no – Jacky Dec 10 '16 at 23:30
I added the definitions for each value. – Michael Benjamin Dec 10 '16 at 23:38
Yes I read that from MDN after you answered me, but it didn't mention anything about paddings – Jacky Dec 10 '16 at 23:41
@Michael_B, try my code, and remove the white-space: pre, you will get rid of the padding – Jacky Dec 10 '16 at 23:48
1

@Jacky, The `padding-top` issue you mention isn't really padding. There appears to be at least one carriage return at the start of the text. – Michael Benjamin Dec 11 '16 at 00:44

score -2 · Answer 2 · edited Aug 24 '20 at 21:24

-2

If possible then use below javascript code for CSS .

var ss = " Hello`, anything will go here, text will come from the server like this, and I need to display it on multiple lines.";

document.getElementById('test').innerHTML = ss.replace(/\n/g, '<br/>');

or

document.getElementById('test').innerHTML = ss.replace(/\n/g, '<br>\n');

<p id="test"> </p>

edited Aug 24 '20 at 21:24

fubar

16,918
4
37
43

answered Aug 24 '20 at 20:45

Santosh

9
1

Can you explain why? – TylerH Aug 24 '20 at 21:30
Because when data append from textarea in Internet explorer to any container like
or
tag. White space CSS not work with it and it also creates the problem, when we convert HTML to PDF by using lib html2pdf.bundle.js. So here you can replace the new line to
tag
– Santosh Aug 25 '20 at 06:04
2

The explanation of your answer belongs _inside_ your answer, not in a comment _under_ your answer. Please edit your answer, then delete your comment. Then there will be no need for any comments under your answer. – mickmackusa Nov 10 '20 at 06:26

score -4 · Answer 3 · answered Dec 10 '16 at 23:26

-4

use "display:block" as your css styling. This should break onto new line.

<p style="display: block" class="description">

answered Dec 10 '16 at 23:26

jjislam

557
3
8

CSS white-space: pre not working as expected

3 Answers3

Linked