CODEWITHSUNDEEP
htmlcss
user3097695
user3097695

Reputation: 1274

White-space:pre-wrap not aligned on first line

I have the following html

<!DOCTYPE html>
 <html>
 <head>
 <style> 
  p.test {
   width: 11em; 
   border: 1px solid #000000;
   word-wrap: break-word;
   white-space: pre-wrap;
 }
 </style>
</head>
<body>
 <p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword.   The long word will break and wrap to the next line.</p>
 </body>

When the page is displayed, the first line of the text shift by one letter. enter image description here

If I change to "white-space:pre-line", the display will not show white space. How to make the first line aligned with the rest of the text?

Upvotes: 8

Views: 9556

Answers (4)

Smaillns
Smaillns

Reputation: 3127

instead of white-space: pre-wrap use the css property white-space: pre-line

Upvotes: 6

Santosh
Santosh

Reputation: 5

You can use javascript, instead of CSS white-space or word-break

var ss = "This paragraph contains a very long word:  thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.";

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

or

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

Upvotes: 0

Malkev
Malkev

Reputation: 122

Just use white-space: normal or not white-space at all.

p.test {
  width: 11em;
  border: 1px solid #000000;
  word-wrap: break-word;
  white-space: normal;
}
<p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>

Upvotes: -1

mituw16
mituw16

Reputation: 5260

Remove the space...

Change

<p class="test"> This

to

<p class="test">This

p.test {
  width: 11em;
  border: 1px solid #000000;
  word-wrap: break-word;
  white-space: pre-wrap;
}
<p class="test">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>

Upvotes: 10

Related Questions