@font-face {
font-family: "ellipsis-font";
/*
* Change this to whatever font you want.
* It's Courier here to make it clear it changed from the default
*/
src: local("Courier");
/*
* The unicode for ellipsis ("…").
* Makes it so this font only gets applied for that single character
*/
unicode-range: U+2026;
}
.my-container {
width: 180px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/*
* Putting our custom font in the front ensures
* it handles the ellipsis display, the second font
* in line should handle everything else
*/
font-family: ellipsis-font, 'Times New Roman', serif;
}
<div class="my-container">This is some lengthy text that is bound to get cut off by overflow</div>
2条答案
按热度按时间iovurdzv1#
您 * 可以 * 将
text-overflow
的值设置为字符串,如下所示:然而:
在草案中,它甚至说:
注意:
<string>
值、2值语法"{1,2}"
和功能都存在风险。基本上,* 不使用字符串值 *。
正因为如此,如果溢出不必是动态的,我将只使用一个类,如果是动态的,则使用JS。
x一个一个一个一个x一个一个二个一个x一个一个三个一个
JS解决方案非常简单:
1.检查元素滚动宽度是否比实际宽度宽(意味着它有溢出)
1.循环,删除最后一个字符,直到滚动宽度 * with *
after
伪元素内容小于宽度。5sxhfpxr2#
在您的情况下,如果省略号字符的格式不正确或缺失,您也可以设置一个自定义字体风格,使您可以仅对该省略号字符使用不同的字体: