作者:mobiledu2502912277 | 来源:互联网 | 2023-05-21 14:18
我正在尝试制作一个隐藏溢出文本的文本框.它工作正常,但在某些方面.我正在使用
text-overflow: ellipsis;
这应该"..."
在我的文本被剪切的地方放置三个点(),但它不会放置三个点,而是放置看起来像三个点的字符(称为"省略号").
我目前使用的字体没有这个字符,所以它显示了一些其他随机字符而不是三个点.
有没有人有一个简单的解决方法(请不要涉及Javascript,只有CSS),同时保留我的文字字体?
1> Lucas - Bett..:
要完全模仿text-overflow: ellipsis
不使用Javascript 的功能,同时仍然具有完整的浏览器支持(text-overflow: "..."
仅在本文发布时在Firefox 9中运行,并且在任何其他浏览器上完全不可用)是非常困难的(如果不是不可能的话).
我能想到的唯一没有任何"黑客"的解决方案是编辑你的字体文件,为...
省略号字符创建一个unicode 字符.我接下来没有这方面的经验,但这里有一个看起来很不错的链接:http://sourceforge.net/projects/ttfedit/
这是我得到的一些HTML代码:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vehicula, augue id pretium euismod, nisi dolor sodales orci, non porttitor ligula velit ac lorem.
还有一些CSS:
#wrapoff {
width: 200px;
border: 2px solid blue;
white-space: nowrap;
overflow: hidden;
position: relative;
}
#wrapoff:after {
content: "...";
position: absolute;
right: 0;
top: 0;
background-color: white;
padding: 0 5px;
}
这会在#wrapoff
div的顶部右上角添加一个伪元素,允许内容工作text-overflow: ellipsis
.这样做的缺点是"省略号"总是显示在那里,无论内容是否实际延伸和溢出.这无法修复,因为无法使用CSS来确定文本是否从页面溢出.
这是一个JSFiddle:
http://jsfiddle.net/ysoxyuje/
边框用于显示元素本身的大小.