html - 溢出包装 : break-word doesn't effect text

Question

我有这个CSS代码

.LogLink {
	font-family:courier;
	white-space: pre;
	font-size: 11.6px;
	border: 2px solid rgb(44, 44, 44);  
	background-color:rgb(240, 240, 240);  
	padding:5px;  
	margin-top:5px;  
	margin-bottom:5px;  
	margin-left:20px;  
	margin-right:20px;  
	overflow-wrap: break-word;
  }

<h2 style='text-align:center'>LogLink: $BuildID</h2>
<p class='LogLink'>[Env] Lorem ipsum dolor sit amet, consectetur adipiscing elit
[Env] Lorem ipsum dolor sit amet, consectetur adipiscing elit
[Env] Lorem ipsum dolor sit amet, consectetur adipiscing elit
[Env] Lorem ipsum dolor sit amet, consectetur adipiscing elit
.............................................................................................................................................................................................................</p>

这是它在我的网页上的显示方式，这就足够了:

问题是当我有这些长行的文本/符号时:

我认为 overflow-wrap: break-word; 会有所帮助，但它没有任何作用。有没有办法让所有的文本都适合页面宽度，而不是水平滚动条，而是换行？注意:我无法编辑收到的文本。

我使用 white-space: pre; 的原因是为了显示我收到的数据库文本。它是在一行中收到的。

编辑white-space: pre; 更改为 white-space: pre-line; 有效!

.LogLink {
	font-family:courier;
	white-space: pre-line;
	font-size: 11.6px;
	border: 2px solid rgb(44, 44, 44);  
	background-color:rgb(240, 240, 240);  
	padding:5px;  
	margin-top:5px;  
	margin-bottom:5px;  
	margin-left:20px;  
	margin-right:20px;  
	overflow-wrap: break-word;
  }

<h2 style='text-align:center'>LogLink: $BuildID</h2>
<p class='LogLink'>[Env] Lorem ipsum dolor sit amet, consectetur adipiscing elit
[Env] Lorem ipsum dolor sit amet, consectetur adipiscing elit
[Env] Lorem ipsum dolor sit amet, consectetur adipiscing elit
[Env] Lorem ipsum dolor sit amet, consectetur adipiscing elit
.............................................................................................................................................................................................................</p>

Answer 1

使用white-space: pre-wrap; 或white-space: pre-line;

这是一个代码笔，显示了一个使用pre-wrap 的例子:https://codepen.io/DavidSabine/pen/Exxvybe

这是我示例中的 CSS:

.LogLink {
    font-family:courier;
    white-space: pre-wrap;
    font-size: 11.6px;
    border: 2px solid rgb(44, 44, 44);  
    background-color:rgb(240, 240, 240);  
    padding:5px;  
    margin-top:5px;  
    margin-bottom:5px;  
    margin-left:20px;  
    margin-right:20px;  
    overflow-wrap: break-word;
  }

pre-wrap 和 pre-line 的区别在这里描述:https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

是否使用pre-wrap 或pre-line 取决于您是希望保留还是折叠空白序列。这在很大程度上取决于您的原始输出(来自您的数据库)的样子。我建议两者都试试。两者都在浏览器中得到很好的支持。请参阅 caniuse.com 上的报告:

https://caniuse.com/#search=pre-line

https://caniuse.com/#search=pre-wrap