从两行开始文本溢出

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 */

}

这里有一个演示代码