css设置文本元素内空白填充的方法

小编给大家分享一下css设置文本元素内空白填充的方法，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！

通过css的white-space属性设置文本元素内的空白填充

white-space属性控制文本在应用它的元素上的处理方式，设置如何处理元素内的空白。

下面我们建立这样一个html：

<div>
   A bunch of words you see.
</div>

设置div的宽度为100px。在合理的字体大小下，添加多一些的文字，来适应100px。没有做任何事情，默认white-space值是normal，文本将换行。

div {
  white-space: normal; 
}

我们来看看效果图：

如果要阻止文本换行，可以使用 white-space: nowrap;

请注意：在本文顶部的html代码示例中，实际上有两个换行符，一个位于文本行之前，另一个位于文本行之后，它们允许文本位于其自己的行中（在代码中）。当文本在浏览器中呈现时，这些换行符就像被删除一样。同样剥离的还有第一个字母前面额外的空格。如果我们想强制浏览器显示我们可以使用的那些换行符和额外的空格字符white-space: pre;

pre被调用是因为这种行为就像您将文本包装在<pre></pre>标签中一样（默认情况下，pre标签可以处理空白和换行）。在HTML中，空白是完全正确的，在代码中出现结束标签之前，文本不会被包装。这在从字面上显示代码时特别有用，从某些格式化中获得了美学上的好处（而且某些时间是绝对关键的，如在依赖于空白空间的语言中！）

也许你喜欢如何pre处理空白和断行的方式，但是您需要包装文本，而不是潜在地从其父容器中断。那就是white-space: pre-wrap;：

最后，white-space: pre-line;将破坏代码中断的行，但仍会剥离额外的空白区域。

有趣的是，最后的换行没有得到尊重。根据CSS 2.1规范： “在保留的换行符处打破行，并根据需要填充行框。” 所以也许这是有道理的。

这是一个了解所有不同值的行为的表：

在CSS3中，该white-space属性实际上将遵循该图表并将属性映射到text-space-collapse并text-wrap相应地。

兼容性

表格中的数字表示支持该属性的第一个浏览器版本号。

看完了这篇文章，相信你对css设置文本元素内空白填充的方法有了一定的了解，想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！