Question

这里是jsfiddle： jsfiddle.net html的：

  <span class="fileName" >long name file to display long name file to displayddddddssdd moreggggg lines more lines more more more lines</span>

.scss：

.fileName {

  -webkit-font-smoothing: antialiased;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; 

  font-size: 17px;
  line-height:  1.4;
  max-height: 71.4px;


  overflow:hidden;
  display: -webkit-box;
  text-overflow: ellipsis;


  width: 175px;


}

文本不会在Firefox中换行或截断。但是在Safari和Chrome中包装并显示省略号。

Firefox支持text-overflow: ellipsis;吗？我包括了scss的其他部分，因为我需要以3行显示文本。所以我不能使用display:inline-block或white-space: nowrap;属性。

Firefox有解决方法吗？感谢。

Answer 1

尝试：

display: -webkit-box;
display: -moz-box;  // Firefox
display: -ms-flexbox;
display: flex;

我认为只有旧版本的Safari使用display: -webkit-box;。 more info here

显示多行并显示文本溢出的省略号并不适用于firefox

1 个答案: