文本溢出：省略号不起作用

Question

这是我试过的（见 这里）：

 body {
    overflow: hidden;
}

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

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

原文由 Randomblue 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

You need to have CSS overflow , width (or max-width ), display , and 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
}

 body {
    overflow: hidden;
}

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

 <span>Test test test test test test</span>

---

附录 如果您想概述进行线夹紧的技术（多行溢出椭圆），请查看此 CSS-Tricks 页面： https ://css-tricks.com/line-clampin/

附录 2 （2019 年 5 月）

如该 链接 所述，Firefox 68 将支持 -webkit-line-clamp (!)

原文由 yunzen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

确保您有块元素、最大尺寸并将溢出设置为隐藏。 （在 IE9 和 FF 7 中测试）

http://jsfiddle.net/uh9zD/

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

原文由 ZippyV 发布，翻译遵循 CC BY-SA 3.0 许可协议