text-overflow：省略号无效

问题描述

这是我试过的 (见 here)：

body {
    overflow: hidden;
}

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
}

本质上，当窗口小时，我希望跨度缩小。我做错了什么？

最佳解决方案

你没有做错什么每个浏览器都不支持。有一个 jQuery 插件 ellipsis，允许你在任何浏览器中使用这个 CSS 。

---

编辑修正，您需要具有 CSS overflow，width，display 和 white-space 。

http://jsfiddle.net/HerrSerker/kaJ3L/1/

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
    display: block;
    overflow: hidden
}

---

附录如果您想要了解线夹 (Multiline Overflow Ellipses) 的技术概述，请查看此 CSS-Tricks 页面：https://css-tricks.com/line-clampin/

次佳解决方案

确保你有一个块元素，一个最大的大小和设置溢出隐藏。 (在 IE9 和 FF7 中测试)

http://jsfiddle.net/uh9zD/

div {
    border: solid 2px blue;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 50px;
}

第三种解决方案

对于 Chrome 中的 multi-lines 使用：

display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; // max nb lines to show
-webkit-box-orient: vertical;

启发自 youtube 😉

第四种方案

我在 Chrome 下有一个省略号的问题。打开 white-space：nowrap 似乎修复了。

max-width: 95px;
max-height: 20px;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
border: solid 1px black;
font-size: 12pt;
text-align: right;
white-space: nowrap;

参考文献

• text-overflow: ellipsis not working

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。