文本溢出省略号未显示某些自定义字体

Question

我正在尝试制作一个隐藏溢出文本的文本框.它工作正常,但在某些方面.我正在使用

text-overflow: ellipsis;

这应该"..."在我的文本被剪切的地方放置三个点(),但它不会放置三个点,而是放置看起来像三个点的字符(称为"省略号").

我目前使用的字体没有这个字符,所以它显示了一些其他随机字符而不是三个点.

有没有人有一个简单的解决方法(请不要涉及JavaScript,只有CSS),同时保留我的文字字体？

Answer 1

要完全模仿text-overflow: ellipsis不使用JavaScript 的功能,同时仍然具有完整的浏览器支持(text-overflow: "..."仅在本文发布时在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;
}

这会在#wrapoffdiv的顶部右上角添加一个伪元素,允许内容工作text-overflow: ellipsis.这样做的缺点是"省略号"总是显示在那里,无论内容是否实际延伸和溢出.这无法修复,因为无法使用CSS来确定文本是否从页面溢出.

这是一个JSFiddle:

http://jsfiddle.net/ysoxyuje/

边框用于显示元素本身的大小.