text-overflow：省略号不工作 [英] text-overflow: ellipsis not working

问题描述

这是我试过的（请参阅这里）：

This is what I tried (see here):

body {
    overflow: hidden;
}

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

基本上，我想让窗口缩小。我做错了什么？

Essentially, I want the span to shrink with ellipsis when the window is made small. What did I do wrong?

推荐答案

您没有错。它不是每个浏览器都支持。
有一个jQuery插件省略号，允许您在任何浏览器中使用此CSS。

You did nothing wrong. It is not supported in every browser yet. There is a jQuery plugin ellipsis that allows you to use this css in any browser.

编辑

更正，您需要CSS overflow ， width and display 。

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/

这篇关于text-overflow：省略号不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！