从两行开始文本溢出

Question

我在表格中使用了以下样式。如果文本有多行，则仅显示第一行，如果用户将鼠标悬停在文本上，则显示其余行。

问题是，如果有的话，我想至少显示两行。想象一下，我有一个包含 4 行的文本，前 2 行应该从一开始就显示，另外 2 行应该在用户将鼠标悬停在文本上时显示。

我当前的代码是这样的：

.cortar {

  width: 135px !important;

  height: 20px;

  padding: 20px;

  border: 1px solid blue;

  text-overflow: ellipsis;

  white-space: nowrap;

  overflow: hidden;

  -webkit-transition: all 1s;

  -moz-transition: all 1s;

  transition: all 1s;

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}

.cortar:hover {

  width: 100%;

  white-space: initial;

  overflow: visible;

  cursor: pointer;

}

我怎样才能实现这个目标？

Answer 1

尝试-webkit-line-clamp如下：.cortar {  width: 135px !important;  height: 20px;  padding: 20px;  border: 1px solid blue;  text-overflow: ellipsis;  white-space: nowrap;  overflow: hidden;  -webkit-transition: all 1s;  -moz-transition: all 1s;  transition: all 1s;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;   /* from here */   box-sizing: border-box;   display: -webkit-box;   -webkit-line-clamp: 2;   -webkit-box-orient: vertical;}如果它是编译的一些 scss 文件，您可能需要添加autoprefixer. 我在使用时遇到了这个问题angular。.cortar {  width: 135px !important;  height: 20px;  padding: 20px;  border: 1px solid blue;  text-overflow: ellipsis;  white-space: nowrap;  overflow: hidden;  -webkit-transition: all 1s;  -moz-transition: all 1s;  transition: all 1s;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;   box-sizing: border-box;   display: -webkit-box;   -webkit-line-clamp: 2;    /* autoprefixer: off */    webkit-box-orient: vertical;    /* autoprefixer: on */}这里有一个演示代码