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

Question

客户向我发送了一个字体,其中未定义'...'字符(它只显示镜像反转'3').所以我想做一些像:

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

任何想法,我怎么能这样做？

Answer 1

您实际上可以设置text-overflow字符串的值,如:

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

然而:

• 它有可怕的浏览器支持(仅限Firefox和边缘)
• 它仅在CSS的编辑器草稿中指定,因此可以很好地删除/更改它.

在草案中,它甚至说:

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

基本上,不要使用字符串值.

因此,如果溢出不必是动态的,我只使用一个类,如果是,则只使用JS.

JS解决方案

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);
}

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">
  Testing overflow yaya look at me !
</p>

JS解决方案实际上非常简单.

1. 检查元素滚动宽度是否宽于实际宽度(意味着它有溢出)
2. 循环,在除去最后一个字符,直到卷动宽度与所述after伪元素含量小于宽度.