显示多行并显示文本溢出的省略号在 Firefox 上不起作用答案

【问题标题】：display multiple lines and show ellipsis for text-overflow doesn't work on firefox显示多行并显示文本溢出的省略号在 Firefox 上不起作用
【发布时间】：2017-01-05 22:58:23
【问题描述】：

这是 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 有解决方法吗？谢谢。

【问题讨论】：

规范中没有 -webkit-box 这样的东西。 -webkit-box 实际上是旧 Safari 和 Chrome 版本的一种解决方法。
我在 jsfiddle 链接中尝试了“box”，它仍然显示没有换行或截断。
您实际上需要display: flex，这是符合规范的属性。
显示为 flex 似乎是另一回事。它可能与 display:block 相同。但是页面在火狐浏览器中显示不一样，不隐藏溢出，不显示省略号。
"display:box" 不存在

标签： css firefox

【解决方案1】：

试试：

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

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

【讨论】：

感谢您的参考和解答。我修改了我的问题，将重点放在显示多行和显示文本溢出的省略号上。随着您提到的更改，overflow:hidden 和 text-overflow:ellipsis 仍然无法正常工作。
谢谢。我注意到.fileName 是<span>（默认情况下是display:inline;），您是否尝试将其设置为display:inline-block; 或display:block;，以便它保持任何高度或宽度给它？