CSS 文本溢出省略号颜色控制方法

场景

文本超出显示 ...，如何控制 ... 的颜色

示例

如代码所示，默认 ... 展示的颜色是 css-spot 设置的 color: red
当我们更改包裹元素的 span 的 display 为 block 时，其对应的颜色为 span 标签设置的 color: blue
当我们更改 span 的父级 text-sub-par 为 display 为 block（同时 span 还原成了 inline），其对应的颜色为 text-sub-par 设置的 color: white

tip

Summary 超出文本 ... 的颜色由包裹它的最近的块级元素标签设置的 color 决定

::: demo [vanilla]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <button id="test-btn1">更改 span 节点为块级元素</button>
    <button id="test-btn2">更改 text-sub-par 节点为块级元素</button>
    <div class="text-par container" id="css-spot" style="color: red">
      <div class="text-sub-par container" style="color: white;display: inline">
        <span class="text container" style="color: blue;">
          这是一段很长很长很长很长的长文本
        </span>
      </div>
    </div>
  </body>
  <script>
    const textPar = document.getElementById('css-spot');
    const textNode = textPar.getElementsByClassName('text')[0];
    const textSubParNode = textPar.getElementsByClassName('text-sub-par')[0];
    const testBtn1 = document.getElementById('test-btn1');
    const testBtn2 = document.getElementById('test-btn2');
    testBtn1.onclick = changeTextNodeBlock;
    testBtn2.onclick = changeTextSubParNodeBlock;

    function changeTextNodeBlock() {
      textNode.style.display = 'block';
    }

    function changeTextSubParNodeBlock() {
      textNode.style.display = 'inline';
      textSubParNode.style.display = 'block';
    }
  </script>
  <style>
    .container {
      width: 120px;
      background: lightgray;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  </style>
</html>

{
  "show": true
}

:::