带有SVG字体的Safari 5.1文本溢出省略号不起作用答案

【问题标题】：Safari 5.1 text-overflow ellipsis with SVG font not working带有SVG字体的Safari 5.1文本溢出省略号不起作用
【发布时间】：2014-07-09 06:43:23
【问题描述】：

我有一个 div 和 text-overflow:ellipsis 和 font-family:'SomeSvgFont'。文本换行在所有浏览器中都可以正常工作，除了 Safari 5.1，其中 div 不是 example@gmai...，而是显示 ...。

如果字体是 woff 类型，则不会发生这种情况，但我更喜欢使用 svg 以便在 webkit 浏览器（包括 Safari）中更好地平滑字体。

我已经在 Windows 和 OS X 上的 Safari 5.1 上进行了测试（Mac 上的 Safari 以后版本也可以正常工作）。

这个问题有解决办法吗？

这是fiddle，以及完整的代码：

@font-face {
    font-family: 'AsapRegular';
    font-style: normal;
    font-weight: 400;
    src: url('url_to_my_svg_font') format('svg');
}

.wrap {
    font-family: 'AsapRegular', sans-serif;
    width: 6em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


<div class="wrap">example@gmail.com</div>

【问题讨论】：

你必须支持N-2版本的浏览器吗？ Saf6 已经存在了一段时间。尤其是在 Windows 上：除了 web 开发人员，还有谁还在使用 Safari？当 Apple 想同时拥有两个版本时，测试回来很方便，但现在？
感谢@FelipeAls。我知道 Safari 5.1 很少见，但不幸的是，我们的一些客户仍在使用它。我可能不会花太多时间来解决这个问题，但如果有一个快速的解决方法会很高兴知道。

标签： html css svg safari font-face

【解决方案1】：

Chrome 窗口也会出现此问题。我的问题通过关闭 text-rendering:optimizelegibility 得到解决。

【讨论】：