zoukankan      html  css  js  c++  java
  • 深入理解CSS中的空白符和换行

    前面的话

      CSS3新增了两个换行属性word-wrap和word-break。把空白符和换行放在一起说,是因为实际上空白符是包括换行的,且常用的文本不换行是使用的空白符的属性white-space: nowrap;到底它们还有些什么属性值,以及有什么对应的用法呢?本文就空白符和换行的内容做详细介绍和梳理

    空白符

    定义

      空白符是指空格、制表符和回车;HTML默认已经把所有空白符合并成一个空格

    white-space

      值: normal | nowrap | pre | pre-wrap | pre-line | inherit

      初始值: normal

      应用于: 所有元素

      继承性: 有

    normal: 合并空白符,允许自动换行
    nowrap: 合并空白符,不允许自动换行
    pre-line: 合并空白符(不包括换行符),允许自动换行
    pre: 不合并空白符,不允许自动换行
    pre-wrap: 不合并空白符,允许自动换行(在pre基础上,保留自动换行) 

      [注意]<pre>元素默认带有样式white-space: pre;

      [注意]IE7-浏览器不支持pre-line和pre-wrap这两个属性值

    <div>They can stay 72-hours 
        within the Shandong      province after they have entered China via the Qingdao International Airport.</div>

    文本换行

      浏览器自身带有文本自动换行的功能,文本容器的右侧可以实现自动换行

      对于英文来说,浏览器会在半角空格或连字符的地方自动换行,而不会在单词的中间突然换行

      对于中文来说,可以在任何一个文字后面换行,但浏览器碰到标点符号时,通常将标点符号以及其前一个文字作为一个整体进行换行

      所以实际上,white-space解决不了长单词或URL地址的换行问题

    word-wrap

      word-wrap属性用来实现长单词或URL地址的自动换行

      值: normal | break-word

      初始值: normal

      应用于: 所有元素

      继承性: 有

    word-wrap:normal(浏览器只在半角空格或连字符的地方进行换行)
    word-wrap:break-word(截断单词换行,长单词从下一行开始)

      [注意]当white-space的值是nowrap或pre时,word-break和word-wrap属性都失效

      [注意]word-wrap在标准中被改为overflow-wrap,但由于兼容问题,一般还是使用word-wrap

    word-break

      CSS3使用word-break属性来决定自动换行的处理方法。通过具体的属性设置,不仅可以让浏览器实现半角空格或连字符后面的换行,而且还可以让浏览器实现任意位置的换行。

      值: normal | break-all | keep-all

      初始值: normal

      应用于: 所有元素

      继承性: 有

    normal: 中文到边界上的汉字换行,英文从整个单词换行
    break-all: 对于英文长单词来说,会截断单词换行,长单词占据当前行剩余空间。但对于中文的处理,各浏览器不一致
        [1]firefox及safari: 中文到边界上的汉字换行,且允许标点置于段首
        [2]IE及chrome: 中文到边界上的汉字换行,但不允许标点置于段首
    keep-all: 对于英文长文本不能换行,但对于中文的处理,各浏览器不一致
        [1]firefox: 在空白符处换行
        [2]IE及chrome: 在空白符及标点处换行
        [3]safari: 不支持

      [注意]移动端目前基本都不支持keep-all值  

      [注意]当word-break值为break-all时,word-wrap属性失效;否则两个属性都起作用

    表格

      对于表单元格的文本来说,使用word-wrap或word-break来强制换行需要设置table-layout:fixed

    伪元素换行

      有一个Unicode字符,是专门代表换行符的:0x000A,在CSS中,写作'00A',可以简写为'A'

      但是,由于浏览器会合并空白符。因此,需要使用pre来阻止空白符的合并

      下面是一个实例

    <style>
    dt,dd{display:inline;}
    dd{margin: 0;font-weight:bold;}
    dd+dt::before{content:'A';white-space:pre;}
    dd+dd::before{content:',';font-weight:normal;}
    </style>
    <dl>
      <dt>姓名:</dt>
      <dd>小火柴</dd>
      <dt>邮箱:</dt>
      <dd>123@qq.com</dd>
      <dd>123@163.com</dd>  
    </dl>

    最后

      我个人理解,空白符(white-space)最常用的功能是nowrap,即不换行;而CSS3新增的两个属性word-wrap和word-break主要用于解决长文本换行的问题。word-wrap:break-word截断长文本换行,长文本从下一行开始;word-break:break-all也用于截断长文本换行,但长文本会占据当前行剩余空间

      当然,空白符(white-space)除了nowrap,还有其他的一些属性值。word-wrap和word-break也有针对中文的处理。但由于浏览器兼容器问题,用的并不是太多

      欢迎交流

  • 相关阅读:
    VIJOS-P1340 拯救ice-cream(广搜+优先级队列)
    uva 11754 Code Feat
    uva11426 GCD Extreme(II)
    uvalive 4119 Always an Interger
    POJ 1442 Black Box 优先队列
    2014上海网络赛 HDU 5053 the Sum of Cube
    uvalive 4795 Paperweight
    uvalive 4589 Asteroids
    uvalive 4973 Ardenia
    DP——数字游戏
  • 原文地址:https://www.cnblogs.com/xiaohuochai/p/5326132.html
Copyright © 2011-2022 走看看