有换行符时切断文本[重复]答案

【问题标题】：Cut text off when it has a line break [duplicate]有换行符时切断文本[重复]
【发布时间】：2018-10-28 07:37:34
【问题描述】：

我是 div 持有文本，我不希望 div 高于某个尺寸或宽于某个尺寸。我已经设置了最大宽度和最大高度。我现在的问题是，当文本太长时会出现问题。有什么方法可以在需要换行时将文本切断？

编辑：我想在省略号开始之前输入两行文本。

【问题讨论】：

【解决方案1】：

试试这个：

.overflow {
  line-height: 1.5em;
  height: 3em;
  overflow: hidden; 
  text-overflow: ellipsis;
}

这将使您的文本最多保持 2 行。

【讨论】：

【解决方案2】：

看起来您可以让文本出现在带有省略号的单行上，也可以在没有省略号的情况下出现在两行中。

用省略号试试这个：

.overflow {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

或者这对于没有省略号的两行：

.overflow {
    text-overflow: ellipsis;
    line-height: 1.5em;
    height: 3em;
    overflow: hidden;
}

这里有一个Sample Fiddle 供您参考。

【讨论】：