文本溢出:省略号不工作

这是我所尝试的(参见在这里):

body {
overflow: hidden;
}


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

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

347518 次浏览
小开
最佳答案

你需要有CSS overflow， width(或max-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
}


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>

Addendum If you want an overview of techniques to do line clamping (Multiline Overflow Ellipses), look at this CSS-Tricks page: https://css-tricks.com/line-clampin/

Addendum2 (May 2019)
As this link claims, Firefox 68 will support -webkit-line-clamp (!)

小开

确保你有一个块元素，一个最大大小，并将overflow设置为hidden。(在IE9和FF 7测试)

http://jsfiddle.net/uh9zD/

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

这个，只有这个对我有用 对于a 

<pre> </pre>

标签

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

小开

将下面的代码添加到您喜欢的地方

例子

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;
}
小开

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

小开

只是给可能无意中发现这个的人一个提示…我的h2继承了

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

这是不允许省略的。显然这很棘手，是吧?

小开

我有一个问题与省略下铬。打开空白: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;
小开

你可以尝试在CSS中添加以下省略号:

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

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

小开

对于多行

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

小开

在CSS中添加下列行以使省略号工作

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

无固定宽度

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

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

我使用:

  • overflow-x: clip来水平折叠它
  • white-space: nowrap来避免新行
  • text-overflow: ellipsis来在结尾添加...
overflow-x: clip;
white-space: nowrap;
text-overflow: ellipsis;

考虑到显示为flex它不会工作，只需将其更改为适合您的需要。


提交答案