Question

我有以下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>

显示页面时，文本的第一行移动一个字母。

如果我更改为＆＃34; white-space：pre-line＆＃34;，则显示屏不会显示空格。如何使第一行与文本的其余部分对齐？

Answer 1

删除空格......

更改

<p class="test"> This

到

<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>

Answer 2

使用css属性white-space: pre-wrap代替white-space: pre-line

Answer 3

只需使用white-space: normal或不使用white-space。

＆＃13;

p.test {
  width: 11em;
  border: 1px solid #000000;
  word-wrap: break-word;
  white-space: normal;
}

＆＃13;

<p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>

＆＃13;

Answer 4

您可以使用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/>');

或

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

白色空间：预包裹未在第一行对齐

4 个答案: