CODEWITHSUNDEEP
htmlcss
user2879704
user2879704

Reputation:

Setting white-space as pre doesn't preserve extra white spaces

I am using white-space:pre css property to preserve the whitespace characters inside the html element value. The browser html dom looks like this,

enter image description here

But on rendering, li element's values get trimmed and two tabular column format that i tried to use has gone bad and it comes as a one single string.

enter image description here

How to render multiple whitespace characters using css/js?

Upvotes: 1

Views: 316

Answers (1)

jcuenod
jcuenod

Reputation: 58405

You are setting white-space="pre" in the DOM. It belongs in css.

You need something like:

li {
    white-space: pre;
}

You will also need to be using a mono-spaced font (in non-monospaced fonts, space characters are not as wide as other characters. So although there are the same number of columns, they are not equally wide).

li {
  white-space: pre;
  font-family: mono;
}
<ul>
  <li>Lorem ipsum dolor  lorem</li> 
  <li>Lipsum dolor       lorem</li>
  <li>Lorem ipsum        lorem</li>
  <li>Lorem ipsum dor    lorem</li>
</ul>

@freefaller has pointed out that this can be done using inline css like this:

<ul>
  <li style="white-space: pre;">Lorem ipsum dolor  lorem</li> 
  <li style="white-space: pre;">Lipsum dolor       lorem</li>
  <li style="white-space: pre;">Lorem ipsum        lorem</li>
  <li style="white-space: pre;">Lorem ipsum dor    lorem</li>
</ul>

The reason I would not recommend this solution is that if you want to change that, you have to change every line. HTML is for describing the content (e.g header or body) not telling the browser how it should look.

Upvotes: 5

Related Questions