如何为溢出的文本提供至少 2 行空间？

Question

预期输出应至少有 2 行高

\n\n

\n\n

我想保留text-overflow: ellipsis财产

\n\n

\r\n

\r\n

<div style="min-height: 128px;\r\n    border-radius: 7px;\r\n    box-shadow: 0 2px 4px 0 rgba(210, 210, 210, 0.5);\r\n    border: solid 0.3px rgba(26, 25, 25, 0.15);\r\n    background-color: #ffffff;\r\n    width: 268px;\r\n    margin-bottom: 13px;">\r\n\r\n\r\n  <div style="  width: 100px;     font-family: Roboto;\r\n    font-size: 13px;\r\n    font-weight: normal;\r\n    font-style: normal;\r\n    font-stretch: normal;\r\n    line-height: normal;\r\n    letter-spacing: 0.29px;\r\n    white-space: nowrap;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    padding-top: 5.6px;\r\n    height: 49px;">\r\n    Can we make this upper case? and also remove the word and\xe2\x80\x99? Can we make this upper case? and also remove the word and\xe2\x80\x99? Can we make this upper case? and also remove the word and\xe2\x80\x99? Can we make this upper case? and also remove the word and\xe2\x80\x99? Can we make\r\n    this upper case? and also remove the word and\xe2\x80\x99? Can we make this upper case? and also remove the word and\xe2\x80\x99?\r\n\r\n  </div>\r\n\r\n</div>

\r\n

\r\n

\r\n

\n

Answer 1

从这个答案-webkit-line-clamp中得到了使用（在 IE 中不起作用）的最佳方法

\n\n

\r\n

\r\n

<div style="min-height: 128px;\r\n    border-radius: 7px;\r\n    box-shadow: 0 2px 4px 0 rgba(210, 210, 210, 0.5);\r\n    border: solid 0.3px rgba(26, 25, 25, 0.15);\r\n    background-color: #ffffff;\r\n    width: 268px;\r\n    margin-bottom: 13px;">\r\n\r\n\r\n  <div style="       font-family: Roboto;\r\n    font-size: 13px;\r\n    font-weight: normal;\r\n    font-style: normal;\r\n    font-stretch: normal;\r\n    line-height: normal;\r\n    letter-spacing: 0.29px;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    padding-top: 5.6px;\r\n    display: -webkit-box;\r\n    -webkit-line-clamp: 2;\r\n    -webkit-box-orient: vertical;">\r\n    Can we make this upper case? and also remove the word and\xe2\x80\x99? Can we make this upper case? and also remove the word and\xe2\x80\x99? Can we make this upper case? and also remove the word and\xe2\x80\x99? Can we make this upper case? and also remove the word and\xe2\x80\x99? Can we make\r\n    this upper case? and also remove the word and\xe2\x80\x99? Can we make this upper case? and also remove the word and\xe2\x80\x99?\r\n\r\n  </div>\r\n\r\n</div>

\r\n

\r\n

\r\n

\n