溢出换行：断字不影响文本

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

此处说明了预包装和预行之间的区别：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

Answer 2

尝试在包含max-width标签的容器上甚至在<p>标签本身上设置<p>。一起使用width和max-width将使其响应； width: 400px max-width: 85%