Question

这就是我尝试过的（见here）：

body {
    overflow: hidden;
}

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

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

Answer 1

您需要拥有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/

附录2 （2019年5月）
正如此link声明的那样，Firefox 68将支持-webkit-line-clamp（！）

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

我在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 5

word-wrap: break-word;

这只是为我完成了这份工作

<pre> </pre>

标签

everthing else没能做省略号......

Answer 6

将以下代码添加到您喜欢的位置

例如

p{
   display: block; /* Fallback for non-webkit */
   display: -webkit-box;
   max-width: 400px;
   margin: 0 auto;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
 }

Answer 7

对于任何可能偶然发现这一点的人来说，只是一个预示......我的h2正在继承

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

不允许省略号。显然这是非常挑剔的呃？

Answer 8

您可以通过在CSS中添加以下内容来尝试使用省略号：

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

但似乎此代码仅适用于单行修剪。可以在本网站找到更多修剪文本和显示省略号的方法：http://blog.sanuker.com/?p=631

Answer 9

多行

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 10

没有固定宽度

对于我们不想不想使用固定宽度的用户，它也可以使用display: inline-grid使用。因此，连同所需的属性一起，您只需添加display

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

Answer 11

在CSS中添加以下行以使省略号生效

 p {
     display: block; // change it as per your requirement
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }

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

11 个答案:

多行

没有固定宽度