html - 溢出换行：断词不影响文本

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;更改 trowhite-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>

标签： htmlcss

Answer 1

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