css如何设置文本元素内的空白填充？

今天给大家介绍的是通过css的white-space属性设置文本元素内的空白填充。下面我们来了解一下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如何设置文本元素内的空白填充？的详细内容，更多请关注Gxlcms其它相关文章！