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