争怎路由网:是一个主要分享无线路由器安装设置经验的网站,汇总WiFi常见问题的解决方法。

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

时间:2023/12/21作者:未知来源:争怎路由网人气:

网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
css如何设置文本元素内的空白填充?本篇文章给大家带来的内容是介绍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; 
}

我们来看看效果图:

1.jpg

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

2.jpg

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

3.jpg

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

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

4.png

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

5.png

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

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

6.jpg

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

兼容性

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

7.jpg

总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。

以上就是css如何设置文本元素内的空白填充?的详细内容,更多请关注php中文网其它相关文章!


网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



关键词:css如何设置文本元素内的空白填充?




Copyright © 2012-2018 争怎路由网(http://www.zhengzen.com) .All Rights Reserved 网站地图 友情链接

免责声明:本站资源均来自互联网收集 如有侵犯到您利益的地方请及时联系管理删除,敬请见谅!

QQ:1006262270   邮箱:kfyvi376850063@126.com   手机版