CSS text-overflow 文本溢出省略号用法

作用

对文本内容进行截断
这个属性只对那些在块级元素溢出的内容有效，但是必须要与块级元素内联(inline)方向一致（举个反例：内容在盒子的下方溢出。此时就不会生效）。
文本可能在以下情况下溢出：当其因为某种原因而无法换行(例子：设置了 white-space:nowrap)，或者一个单词因为太长而不能合理地被安置。
这个属性并不会强制“溢出”事件的发生，为了能让 text-overflow 能够生效，必须要在元素上添加几个额外的属性，比如将 overflow 设置为 hidden。

允许的值

clip：此为默认值。这个关键字的意思是"在内容区域的极限处截断文本"，因此在字符的中间可能会发生截断。如果你的目标浏览器支持 text-overflow: ''，为了能在两个字符过渡处截断，你可以使用一个空字符串值 ('') 作为 text-overflow 属性的值。
ellipsis：这个关键字的意思是“用一个省略号 ('…')来表示被截断的文本”。这个省略号被添加在内容区域中，因此会减少显示的文本。如果空间太小到连省略号都容纳不下，那么这个省略号也会被截断。
<string>： <string> 用来表示被截断的文本。字符串内容将被添加在内容区域中，所以会减少显示出的文本。如果空间太小到连省略号都容纳不下，那么这个字符串也会被截断。

tip

<string> 在谷歌下并不生效，在火狐上可以

::: demo [vanilla]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <style>
    .test-overflow {
      width: 200px;
      border: 1px solid;
      padding: 2px 5px;
      white-space: nowrap;
      overflow: hidden;
    }
  </style>
  <body id="test-overflow">
    <p style="white-space: normal;" class="test-overflow">
      这是一段很长很长很长测试文字Lorem这是一段很长很长很长测试文字Lorem ipsum
      dolor sit amet, consectetur adipisicing elit.
    </p>
    <p style="text-overflow: clip; " class="test-overflow">
      这是一段很长很长很长测试文字Lorem这是一段很长很长很长测试文字LoremLorem
      ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
    <p style="text-overflow: ellipsis;  " class="test-overflow">
      这是一段很长很长很长测试文字Lorem这是一段很长很长很长测试文字LoremLorem
      ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
    <p style="text-overflow: '这是被剪断的文本内容';" class="test-overflow">
      这是一段很长很长很长测试文字Lorem这是一段很长很长很长测试文字LoremLorem
      ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
  </body>
</html>

:::