本文介绍了text-overflow:省略号不工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

这是我试过的(请参阅):

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

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






附录
如果您想了解如何进行行锁定(Multiline Overflow Ellipses),请参考这个CSS-Tricks页面:

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

08-15 12:07