我正在尝试使一个隐藏文字的文本框.它工作正常,但有一部分.我在用着
text-overflow: ellipsis;
这应该在我的文本被切掉的地方放置三个点(“…”),但它不会放置三个点,而是放置看起来像三个点的字符(称为“省略号”).
我目前使用的字体没有这个字符,所以它显示一些其他随机字符而不是三个点.
有没有人有一个简单的解决方法(没有JavaScript涉及,只有CSS),同时保持我的字体的文本？
解决方法
完全模仿文本溢出的功能：省略号,而不使用JavaScript,同时仍然有完整的浏览器支持(文本溢出：“…”仅在这篇文章中适用于Firefox 9,并且在任何其他浏览器中完全不可用)是非常困难的(如果不是不可能的话).
我可以想到没有任何“黑客”的唯一解决方案是编辑您的字体文件,为…省略号字符创建一个unicode字符.我在这方面没有任何经验,但这里有一个似乎相当不错的链接：http://sourceforge.net/projects/ttfedit/
这里有一些HTML代码：
<div id="wrapoff"> Lorem ipsum dolor sit amet,consectetur adipiscing elit. Pellentesque vehicula,augue id pretium euismod,nisi dolor sodales orci,non porttitor ligula velit ac lorem. </div>
和一些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的顶部在右上角添加一个伪元素,允许内容像文本溢出：省略号一样工作.这样做的缺点是,“省略号”总是显示在那里,而不管内容是否实际上延伸并溢出.这是无法修复的,因为没有办法使用CSS来确定文本是否溢出页面.
这是一个JSFiddle：
边框是向你展示元素本身的大小.
