Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

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?

like image 374
user3097695 Avatar asked Dec 19 '22 02:12

user3097695


2 Answers

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>
like image 119
mituw16 Avatar answered Dec 20 '22 16:12

mituw16


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

like image 42
Smaillns Avatar answered Dec 20 '22 16:12

Smaillns