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

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

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

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

对于多行

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

你也可以在你的css中添加width来指定特定宽度的元素:

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

我使用:

溢出-x:剪辑只是水平折叠它 空格:避免新行 Text-overflow:使用省略号添加…在最后

overflow-x: clip;
white-space: nowrap;
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;-)

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

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