时间戳

首页 > 解决方案 > 将 `text-overflow: ellipsis` 与带有 `display: -webkit-box` 的长且无空格的字符串一起使用

html - 将 `text-overflow: ellipsis` 与带有 `display: -webkit-box` 的长且无空格的字符串一起使用

问题描述

display: -webkit-box与获取文本溢出省略号所需的 CSS 一起使用时，省略号会消失。

这是一个工作示例。两个文本都显示省略号，但它们不是因为display: -webkit-box

https://jsfiddle.net/4wr2dgme/

我正在使用的 CSS：

.overflow-class {
  display: -webkit-box;
  max-width: 130px;
  min-width: 130px;
  overflow-x: hidden;
  overflow-y: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 130px; 
}

有什么办法可以绕过这个问题，两全其美？我正在使用，-webkit-box所以我可以限制 div 文本的行数。

标签： htmlcssoverflowellipsis

解决方案

推荐阅读