文本溢出:省略号不工作

这是我的尝试(见这里):

body {
    overflow: hidden;
}

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

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

当前回答

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

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

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

2014-08-29 21:12:11

其他回答

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

2014-11-13 15:50:37

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

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

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

2014-08-29 21:12:11

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

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

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

2016-01-05 04:23:23

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

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

2017-10-06 12:33:01

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

2014-08-18 16:00:43

文本溢出:省略号不工作

推荐文章

最新文章

标签