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

Question

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

text-overflow: ellipsis;

这应该在我的文字被截断的地方放置三个点（"..."），但它没有放置三个点，而是放置了看起来像三个点的字符（称为'ellipsis').

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

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

Answer 1

所以，我知道这并不理想，但它是一种解决方法。 CSS3 规范说省略号必须从它们所在的容器中获取它们的样式。这在所有浏览器中都可以正常工作，除了 IE8/9 它从容器的第一个字母中获取省略号样式。我建议的解决方法是用内联元素将 "overflowed" 元素内的文本包装起来，为外部容器提供一种字体，其中省略号是定义的，并给出自定义字体内的内联元素。它看起来像这样 fiddle: http://jsfiddle.net/u9dudost/2/

如需添加IE8/9支持，添加如下：

div {
    white-space: nowrap;
}

div::before {
    font-family: 'Helvetica', sans-serif; /* Your custom font here. */
    content: ''; /* IE9 fix */
}

Answer 2

您实际上可以指定自己的字符集来表示文本溢出，而不是 "ellipsis"。

如果您的自定义字体定义了句点，您应该可以像这样使用三个句点：

text-overflow: '...';

这是一个 JSFiddle 的实际应用：http://jsfiddle.net/x5e6yv21/

Answer 3

您需要同时使用以下内容：

white-space: nowrap;
text-overflow: ellipsis;

Answer 4

确保你有

white-space: nowrap;
overflow: hidden;

和你的

text-overflow: ellipsis;

Answer 5

据我了解，您遇到的问题是，在您使用的字体中，您缺少 省略号字符。

要快速解决此问题，您可以 select 使用 ::last-letter 伪元素 select 或
并更改 font-family 属性到另一种支持省略号的字体 _

Answer 6

http://jsfiddle.net/cbppL/707/

HTML

<header>
<h1>Long text is so long oh my is long indeed</h1>
</header>

CSS

header {
border:1px solid red;
width:150px;
position:relative;
}

h1 {
   overflow:hidden;
    white-space:nowrap;
   /* -ms-text-overflow:ellipsis; */
    /* text-overflow:ellipsis; */
    width:150px;
    height:1.2em;
}
header:after{
    content:"...";
    position:absolute;
    top:0;
    right:0;
    background:#fff;
}
h1:hover {
    overflow:visible;
}

这不是一个很好的解决方案。这将取决于你有什么样的背景。希望有帮助！

Answer 7

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

我能想到的没有任何 "hacks" 的唯一解决方案是编辑您的字体文件，为 ... 省略号字符创建一个 unicode 字符。我在这方面几乎没有经验，但这里有一个 link 看起来相当不错：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 一样工作。这样做的缺点是 "ellipsis" 总是显示在那里，无论内容是否实际延伸和溢出。这无法修复，因为无法使用 CSS 确定文本是否溢出页面。

这是一个 JSFiddle：

http://jsfiddle.net/ysoxyuje/

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

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

Text overflow ellipsis not showing with some custom font

html

css

overflow

ellipsis