html - text-overflow 改变省略号的内容

Question

一位客户给我发送了一种字体，其中未定义“...”字符(它只显示镜像倒置的“3”)。所以我想做类似的事情:

.myclass ul li{
    text-overflow: ellipsis;
    text-overflow-content: '...';
}

知道我该怎么做吗？

Answer 1

您可以设置 text-overflow 的值到一个字符串，例如:

.myclass ul li{
    text-overflow: '...';
}

但是:

• 它对浏览器的支持很糟糕(仅在 Firefox 和 edge 中)
• 只有specified in the editors draft for CSS , 所以它很可能被删除/更改。

在草案中，它甚至说:

Note: The <string> value, and the 2-value syntax "{1,2}" and functionality are all at risk.

基本上，不要使用字符串值。

因此，如果溢出不必是动态的，我将只使用一个类，如果是，我将使用 JS。

JS 解决方案

let p = document.querySelector(".js-overflow");

// Add overflow class if needed
if (p.scrollWidth > p.offsetWidth) p.classList.add("has-overflow");

while (p.scrollWidth > p.offsetWidth) {
  // Remove characters from paragraph until the text and the overflow indicator fit
  p.innerHTML = p.innerHTML.slice(0, -1);
}

p {
  width: 200px;
  border: 1px solid;
  padding: 2px 5px;
  /* BOTH of the following are required for text-overflow */
  white-space: nowrap;
  overflow: hidden;
}

.has-overflow:after {
  content: "..."
}

<p class="js-overflow">
  Simple string to test text overflow, will overflow to your custom string at 200px.
</p>

一个 JS 解决方案非常简单:

1. 检查元素滚动宽度是否比实际宽度宽(意味着它有溢出)
2. 循环，删除最后一个字符直到滚动宽度和 after伪元素内容小于宽度。