空白：预换行未在第一行对齐
[英]White-space:pre-wrap not aligned on first line
问题描述
I have the following html
我有以下 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.如果我更改为“white-space:pre-line”，显示器将不会显示空白。 How to make the first line aligned with the rest of the text?如何使第一行与文本的其余部分对齐？
4 个解决方案
解决方案1
8 已采纳 2017-11-22 15:41:36
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>
解决方案2
1 2020-10-08 15:20:13
而不是white-space: pre-wrap使用 css 属性white-space: pre-line
解决方案3
0 2017-11-22 15:43:10
Just use white-space: normal or not white-space at all.只要使用white-space: normal与否white-space可言。
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>
解决方案4
0 2020-08-24 20:40:39
You can use javascript, instead of CSS white-space or word-break您可以使用 javascript，而不是 CSS 空白或断字
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');
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.