一位客户给我发送了一种字体,其中未定义“...”字符(它只显示镜像倒置的“3”)。所以我想做类似的事情:
.myclass ul li{
text-overflow: ellipsis;
text-overflow-content: '...';
}
知道我该怎么做吗?
最佳答案
您可以设置 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 解决方案非常简单:
- 检查元素滚动宽度是否比实际宽度宽(意味着它有溢出)
- 循环,删除最后一个字符直到滚动宽度和
after
伪元素内容小于宽度。
关于html - text-overflow 改变省略号的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41549021/