Question

客户向我发送了一个未定义＆＃39; ...＆＃39;字符的字体（它只显示镜像反转的＆＃39; 3＆＃39;）。所以我想做一些像：

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

任何想法，我该怎么做？

Answer 1

您可以实际将text-overflow的值设置为字符串，例如：

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

然而：

它有可怕的浏览器支持（仅限Firefox和可能的边缘）
它只有specified in the editors draft for CSS，因此可以很好地删除/更改。

在选秀中，它甚至说：

注意：<string>值和2值语法"{1,2}"和功能都存在风险。

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

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

JS解决方案

＆＃13;

var p = document.querySelector(".js-overflow");

if (p.scrollWidth > p.offsetWidth) p.classList.add("has-overflow");

while (p.scrollWidth > p.offsetWidth) {
  p.innerHTML = p.innerHTML.slice(0, -1);
}

＆＃13;

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: "..."
}

＆＃13;

<p class="js-overflow">
  Testing overflow yaya look at me !
</p>

＆＃13;

JS解决方案实际上真的简单。

检查元素滚动宽度是否宽于其实际宽度（意味着它有溢出）
循环，删除最后一个字符，直到 {001}伪元素内容的滚动宽度小于宽度。

文本溢出更改省略号的内容

1 个答案:

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