文本溢出省略号不会显示某些自定义字体 [英] Text overflow ellipsis not showing with some custom font

问题描述

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

  text-overflow：ellipsis; 
  

这应该放三点（...）在我的文本被切断的地方，但它不放置三个点，而是放置看起来像三个点的字符（称为'省略号'）。

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

有没有人简单的解决方法（不需要javascript，请仅使用CSS），同时保留字体的文本？ 为了完全模仿功能文本溢出：省略号不使用JavaScript，同时仍然支持完整的浏览器（ text-overflow：...仅在Firefox 9中可用，并且在任何其他浏览器中完全不可用）非常困难（如果不是不可能的话）。

唯一的解决方案I可以想到没有任何黑客就是编辑你的字体文件，c为 ... 省略号字符指定一个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纯蓝色; 
 white-space：nowrap; 
 overflow：hidden; 
职位：亲属; 
} 
 #wrapoff：在{
 content：...; 
位置：绝对; 
 right：0; 
 top：0; 
背景颜色：白色; 
 padding：0 5px; 
 
 
 
 $ b 
这在顶部添加了一个伪元素， #wrapoff  div，位于右上角，允许内容像 text-overflow：ellipsis 一样工作。这样做的缺点是省略号总是显示在那里，而不管内容是否实际延伸并溢出。这是无法修复的，因为没有办法使用CSS来判断文本是否溢出页面。
 
 
 
这是一个JSFiddle：
 
 
 
  http://jsfiddle.net/ysoxyuje/  
 
 
 
边框用于显示元素本身的大小。
 
I'm currently trying to make a text box with hiding overflowing text. It works fine, but for some part. I'm using
text-overflow: ellipsis;
This should put three dots ("...") at the place where my text is cut off, but it doesn't place three dots, instead it places the character which looks like three dots (called 'ellipsis').

The font I'm currently using doesn't have this character, so it shows some other random character instead of three dots.

Does anyone have a simple workaround (no javascript involved please, only CSS), while keeping my font for the text ?
解决方案
To completely imitate the functionality of text-overflow: ellipsis without using JavaScript while still having complete browser support (text-overflow: "..." only works in Firefox 9 in the time of this post, and is completely unavailable on any other browser) is extremely difficult (if not impossible).

The only solution I can think of without any "hacks" is to edit your font file, creating a unicode character for the ... ellipsis character. I have next to no experience in this area, but here's a link that seems pretty good: http://sourceforge.net/projects/ttfedit/

Here's some HTML code I've got:
<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>
And some 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;
}
This adds a pseudo-element on top of the #wrapoff div, at the top right hand corner, allowing the content to work like text-overflow: ellipsis. The downside to this is that the "ellipsis" always shows there, regardless of whether the content actually extends off and overflows. This cannot be fixed, as there is no way using CSS to figure out whether the text overflows off the page.

Here's a JSFiddle:

http://jsfiddle.net/ysoxyuje/

The border is to show you the size of the element itself.

                        
这篇关于文本溢出省略号不会显示某些自定义字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！