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.

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?
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>instead of white-space: pre-wrap use the css property white-space: pre-line
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With