前端开发那些事儿

梳理CSS3中文本相关的新增属性

2020-08-25  本文已影响0人  深度剖析JavaScript

针对文本，CSS3新增了一些属性，为了让看起来不乱，我将其梳理成图如下

CSS text相关.png
其中CSS3中新增：
1. tab-size
2. word-break
3. word-wrap/overflow-wrap
4. text-align-last
5. text-justify
6. text-size-adjust

tab-size用于设置元素内容文本中的制表符的长度；由于制表符默认不呈现，得依赖于white-space:pre或者white-space:pre-wrap

<head>
  <style>
    div {
      width: 300px;
      height: 130px;
      padding: 21px;
      background-color: pink;
      border-radius: 4px;
      margin: 0 auto;
    }
    div p {
      tab-size: 20px;
    }
  </style>
</head>
<body>
  <div>
    <p>   The coronavirus pandemic may have driven as many as 100 million people back into extreme poverty, World Bank President David Malpass warned Thursday.</p>
  </div>
</body>
不设置white-space时，页面不显示制表符

设置空白显示方式为pre或者pre-wrap只会就可以设置tab-size了

div p {
  tab-size: 20px;
  white-space: pre-wrap;
}
成功结果

下面来看下一个新增的word-break
word-break用于设置换行时单词是否要打断处理；其值可以是normal、keep-all、break-all、break-word，分别表示默认换行（允许字之间发生换行）、不换行、允许任意字符内发生换行、break-word同样也是在文本内容遇见边界时，强制将文本打断换行，不同的在于它会考虑单词是否完整，如果当前行无法放下需要被打断的单词，为了保持完整性，会将整个单词放到下一行进行展示

<head>
  <style>
    div {
      width: 300px;
      height: 200px;
      padding: 8px 10px;
      background-color: pink;
      border-radius: 4px;
      float: left;
      margin: 8px;
    }
div:nth-of-type(1) p {
  word-break: normal;
}
div:nth-of-type(2) p {
  word-break: keep-all;
}
div:nth-of-type(3) p {
  word-break: break-all;
}
div:nth-of-type(4) p {
  word-break: break-word;
}
  </style>
</head>
<body>
  <div>
    <p>The coronavirus pandemic may have driven as many as 100 million people back into extreme poverty, World Bank President David Malpass warned Thursday.</p>
    <p>世界银行行长戴维·马尔帕斯8月20日警告说，新冠疫情或令1亿人重新陷入极端贫困。</p>
  </div>
  <div>
    <p>The coronavirus pandemic may have driven as many as 100 million people back into extreme poverty, World Bank President David Malpass warned Thursday.</p>
    <p>世界银行行长戴维·马尔帕斯8月20日警告说，新冠疫情或令1亿人重新陷入极端贫困。</p>
  </div>
  <div>
    <p>The coronavirus pandemic may have driven as many as 100 million people back into extreme poverty, World Bank President David Malpass warned Thursday.</p>
    <p>世界银行行长戴维·马尔帕斯8月20日警告说，新冠疫情或令1亿人重新陷入极端贫困。</p>
  </div>
  <div>
    <p>The coronavirus pandemic may have driven as many as 100 million people back into extreme poverty, World Bank President David Malpass warned Thursday.</p>
    <p>世界银行行长戴维·马尔帕斯8月20日警告说，新冠疫情或令1亿人重新陷入极端贫困。</p>
  </div>
</body>
结果分别对应normal、keep-all、break-all、break-word

接着来看 word-wrap/overflow-wrap
作为IE的私有属性之一，IE5.5率先实现了word-wrap，后期被w3c采纳成标准属性；CSS3中将word-wrap改名为overflow-wrap；
word-wrap/overflow-wrap用于设置文字溢出容器边界时是否断行；值可以是normal或者break-word，分别表示不断行溢出容器、break-word在容器边界内换行并允许单词内部打断换行

<head>
  <style>
    div {
      width: 300px;
      height: 30px;
      padding: 8px 10px;
      background-color: pink;
      border-radius: 4px;
      margin: 8px;
    }

    div:nth-of-type(1) p {
      overflow-wrap: normal;
    }

    div:nth-of-type(2) p {
      overflow-wrap: break-word;
    }
  </style>
</head>

<body>
  <div>
    <p>
      Thecoronaviruspandemicmayhavedrivenasmanyas100millionpeoplebackintoextremepoverty,WorldBankPresidentDavidMalpasswarnedThursday.
    </p>
  </div>
  <div>
    <p>
      Thecoronaviruspandemicmayhavedrivenasmanyas100millionpeoplebackintoextremepoverty,WorldBankPresidentDavidMalpasswarnedThursday.
    </p>
  </div>
</body>
值分别为normal和break-word的情况

下面来看第四个新增属性text-align-last
text-align-last用于设置容器中最后一行文本的文字对齐方式，常用之值包括auto left right center justify

<head>
  <style>
    div {
      width: 300px;
      height: 130px;
      padding: 8px 10px;
      background-color: pink;
      border-radius: 4px;
      float: left;
      margin: 8px;
    }

    div:nth-of-type(1) p {
      text-align-last: auto;
    }

    div:nth-of-type(2) p {
      text-align-last: left;
    }

    div:nth-of-type(3) p {
      text-align-last: right;
      ;
    }

    div:nth-of-type(4) p {
      text-align-last: center;
    }

    div:nth-of-type(5) p {
      text-align-last: justify;
    }
  </style>
</head>

<body>
  <div>
    <p>The coronavirus pandemic may have driven as many as 100 million people back into extreme poverty</p>
  </div>
  <div>
    <p>The coronavirus pandemic may have driven as many as 100 million people back into extreme poverty</p>
  </div>
  <div>
    <p>The coronavirus pandemic may have driven as many as 100 million people back into extreme poverty</p>
  </div>
  <div>
    <p>The coronavirus pandemic may have driven as many as 100 million people back into extreme poverty</p>
  </div>
  <div>
    <p>The coronavirus pandemic may have driven as many as 100 million people back into extreme poverty</p>
  </div>
</body>

下面来看第五个新增属性text-justify
text-justify定义如何实现文本内容的两端对齐
其值包括：auto | none | inter-word | inter-ideograph | inter-cluster | distribute | kashida
auto：浏览器默认的两端对齐
none：禁止两端对齐
inter-word：通过增加字之间的空格对齐文本；对段落的最后一行无效
剩下四个比较少用，用到可以再看文档。
注意：要设置text-align: justify哦才能看出效果 
<head>
  <style>
    div {
      width: 300px;
      height: 130px;
      padding: 8px 10px;
      background-color: pink;
      border-radius: 4px;
      float: left;
      margin: 8px;
    }
    div:nth-of-type(1) p {
      text-justify: inter-word;
      text-align: justify;
    }
  </style>
</head>
<body>
  <div>
    <p>The coronavirus pandemic may have driven as many as 100 million people back into extreme poverty</p>
  </div>
</body>
结果

最后一个是text-size-adjust
text-size-adjust用于设置移动端容器中文本大小如何调整；其值可以是auto、none、%
auto：文本大小根据设备尺寸进行调整。
none：文本大小不会根据设备尺寸进行调整。
%：用百分比来指定文本大小在设备尺寸不同的情况下如何调整
注意：

  1. 该属性只在移动设备上生效；
  2. 如果你的页面没有定义meta viewport，此属性定义将无效；
  3. 如果不希望页面的文本大小随手持设备尺寸变化（比如横竖屏旋转）而发生变化（这可能会导致页面布局错乱），可以定义值为none或者100%
.demo {
    -webkit-text-size-adjust: 100%;
}

剩下文字阴影我打算放到阴影部分，和盒子阴影一起讲

以上是CSS3中新增文本相关的全部内容！

上一篇 下一篇

猜你喜欢

热点阅读