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

Question

这就是我试过的(见这里):

body {
    overflow: hidden;
}

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

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

Answer 1

你需要有CSS overflow,width,max-width,和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/

Answer 2

确保您具有块元素,最大大小并将溢出设置为隐藏.(在IE9和FF 7中测试过)

http://jsfiddle.net/uh9zD/

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

Answer 3

对于Chrome中的多行使用:

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 ;-)

Answer 4

只是给任何可能偶然发现这个问题的人的提示......我的 h2 正在继承

text-rendering: optimizelegibility; 
//Changed to text-rendering: none; for fix

这不允许省略号。显然这很挑剔吧？

Answer 5

对于多行

在 chrome 中，如果您需要在多行上应用省略号，则可以应用此 css。

您还可以在 css 中添加宽度以指定特定宽度的元素：

.multi-line-ellipsis {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

<p class="multi-line-ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Answer 6

word-wrap: break-word;

这个并且只有这个为我完成了工作

<pre> </pre> 

标签

其他一切都没有做省略号....

Answer 7

我在chrome下出现省略号问题。启用空白：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;

Answer 8

无固定宽度

对于我们这些不想使用固定宽度的人来说，它也可以使用display: inline-grid. 因此，除了所需的属性之外，您只需添加display

span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-grid;
}