Question

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

text-overflow: ellipsis;

这应该在我的文字被剪掉的地方放三个点（"..."），但它不会放置三个点，而是放置看起来像三个点的字符（称为＆＃ 39;省略号＆＃39;。）

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

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

Answer 1

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

我能想到的唯一解决方案，没有任何＆＃34; hacks＆＃34;是编辑您的字体文件，为...省略号字符创建一个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一样工作。这方面的缺点是＆＃34;省略号＆＃34;总是在那里显示，无论内容是否实际延伸和溢出。这是无法修复的，因为无法使用CSS来确定文本是否从页面溢出。

这是一个JSFiddle：

http://jsfiddle.net/ysoxyuje/

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

Answer 2

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 3

您可以实际指定自己的字符集来表示文本溢出，而不是＆＃34;省略号＆＃34;，

如果您的自定义字体定义了句点，您应该只能使用三个句点：

text-overflow: '...';

这是一个正在行动的JSFiddle：http://jsfiddle.net/x5e6yv21/

Answer 4

您需要一起使用以下内容：

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

Answer 5

根据我的理解，问题在于，在您使用的字体中，您错过了省略号字符。

要快速解决此问题，您可以使用::last-letter伪元素选择器选择此最后一个字母，并将font-family属性更改为支持省略号的另一种字体_

Answer 6

所以，我知道这不是理想的，但这是一种解决方法。 CSS3规范说，省略号必须从它们所在的容器中获取它们的样式。这在除IE8 / 9之外的所有浏览器中都能正常工作，IE8 / 9从容器的第一个字母开始采用省略号样式。我建议的解决方法是使用内联元素将文本包装在“溢出”元素中，为外部容器指定省略字符定义的字体，并在自定义内部提供内联元素字体。它看起来像这个小提琴：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 7

确保你有

white-space: nowrap;
overflow: hidden;

与你的

text-overflow: ellipsis;

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

7 个答案: