[分享]css不自动换行符段落

在CSS中，我们常常会使用p标签来标识一个段落。如果我们希望段落的文字在达到一定长度时自动换行，我们通常会在CSS中添加如下代码： p { wordwrap: breakword; } 这样，当段落中...

在CSS中，我们常常会使用p标签来标识一个段落。如果我们希望段落的文字在达到一定长度时自动换行，我们通常会在CSS中添加如下代码：
p { word-wrap: break-word; }
这样，当段落中的文字长度超过容器的宽度时，就会自动折行。但是，有时我们希望段落中的文字不自动换行，而是保留原有的格式。这时该怎么办呢？
我们可以使用pre标签来代替p标签来定义段落。在pre标签中，文字不会自动换行，而是按照原有的格式来显示。例如：

 This is a paragraph with     white space       and   line breaks   preserved. 

这样，在网页中显示的时候，段落的格式就会和原本的一致，不会因为默认的自动换行而出现不符合要求的情况。
另外，我们还可以在CSS中添加如下代码，针对pre标签进行样式调整，使得文字更加美观：
pre { white-space: pre-wrap; /* 可以自动换行 */ font-family: monospace; background-color: #f0f0f0; padding: 10px; border: 1px solid #ccc; }
这样，我们就可以在保持段落原有格式的同时，还可以美化段落文字的显示效果。
总之，如果我们希望段落的文字不自动换行，可以使用pre标签来代替p标签来定义段落，从而实现文字格式保持一致的目的。