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

Question

我目前正在尝试制作一个 overflow hidden 文本的文本框。它工作正常，但在某些方面。我正在使用

text-overflow: ellipsis;

这应该在我的文本被截断的地方放置三个点 ("...")，但它没有放置三个点，而是放置了看起来像三个的字符点(称为“省略号”)。

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

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

Answer 1

在不使用 JavaScript 的情况下完全模仿 text-overflow: ellipsis 的功能，同时仍具有完整的浏览器支持(text-overflow: "..." 仅适用于Firefox 9 在本文发布时，并且在任何其他浏览器上完全不可用)非常困难(如果不是不可能的话)。

我能想到的没有任何“hacks”的唯一解决方案是编辑您的字体文件，为 ... 省略号字符创建一个 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 顶部添加了一个伪元素，允许内容像 text-overflow: ellipsis 一样工作。这样做的缺点是“省略号”总是显示在那里，无论内容是否真的延伸和溢出。这无法修复，因为无法使用 CSS 确定文本是否溢出页面。

这是一个 JSFiddle:

http://jsfiddle.net/ysoxyuje/

边框是为了向您显示元素本身的大小。