一文了解CSS3文本新增的东西 | 8月更文挑战

Andy_W
210 阅读4分钟

这是我参与8月更文挑战的第18天，活动详情查看：8月更文挑战

针对文本，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>

设置空白显示方式为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>

接着来看 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>

下面来看第四个新增属性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%;
}

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

avatar
文章
阅读
粉丝