文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS空格和换行实例分析

2024-04-02 19:55

关注

本篇内容主要讲解“CSS空格和换行实例分析”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS空格和换行实例分析”吧!

white-space 属性会影响到用户代理对源文档中的空格、换行与 tab 字符的处置。

经过使用该属性,梗概影响浏览器处置字之间与文本行之间的空白符的方式。从某种水平上讲,默许的 XHTML 处理曾经实现了空白符处置:它会把全数空白符分隔隔离分散为一个空格。以是给定下列标记,它在 Web 浏览器中显示时,各个字之间只会显现一个空格,同时忽略元素中的换行:

<p>This     paragraph has    many
    spaces           in it.</p>

或许用如下声显着式地配置这种默许举止:

p {white-space: normal;}

上面的划定保密浏览器遵循平时的做法去向置惩罚:丢掉多余的空缺符。如果给定这个值,换行字符(回车)会转换为空格,一行中多个空格的序列也会转换为一个空格。

实例 TIY :white-space: normal

值 pre

不外,假设将 white-space 配置为 pre,受这个属性影响的元素中,空白符的处置惩罚就有所差异,其举动就像 XHTML 的 pre 元素异样;空缺符不会被疏忽。

假设 white-space 属性的值为 pre,阅读器将会留神额定的空格,甚至回车。在这个方面,何况仅在这个方面,任何元素都可能相当于一个 pre 元素。

实例 TIY :white-space: pre

注意:经测试,IE 7 以及更早版本的浏览器不赞成该值,是以请使用非 IE 的浏览器来查看上面的实例。

值 nowrap

与之相对的值是 nowrap,它会抗御元素中的文本换行,除非使用了一个 br 元素。在 CSS 中使用 nowrap 颇为近似于 HTML 4 顶用 <td nowrap> 将一个表单元格配置为不能换行,不外 white-space 值或许应用上任何元素。

实例 TIY :white-space: nowrap

值 pre-wrap 和 pre-line

CSS2.1 引入了值 pre-wrap 和 pre-line,这在畴昔版本的 CSS 中是没有的。这些值的感化是准许创作职员更好地管束空白符处置。

要是元素的 white-space 设置装备摆设为 pre-wrap,那末该元素中的文本会保留空白符序列,然则文本行会正常地换行。若是设置为这个值,源文本中的行分隔符以及天生的行分隔符也会保存。pre-line 与 pre-wrap 相反,会像畸形文本中同样分开空缺符序列,但生计换行符。

实例 TIY :white-space: pre-wrap

实例 TIY :white-space: pre-line

属意:咱们在 IE7 与 FireFox2.0 阅读器中测试了下面的两个实例,然则下场是,值 pre-wrap 和 pre-line 都没有失掉很好的赞成。

到此,相信大家对“CSS空格和换行实例分析”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯