如何使用省略号文本溢出来适应卡的高度

Question

我正在尝试使我的文本适合此卡的高度，并使用省略号隐藏了溢出内容，如您所见，我是否使用了空格：不换行，它可以工作，但是使我的文本块变成一行。如果我使用“正常”，我会被挡住，但是省略号已经消失了。如何实现？

<vx-card >
    <template slot="actions">
      <span class="text-grey">{{Time | moment("MM/D/YYYY, h:mm:ss a")}} 
      </span>
    </template>
      <p class="myoverflow" >{{PostContent}}</p>
        <div slot="footer">
          <vs-row vs-justify="flex-end">
            <vs-button color="primary" type="gradient" >View</vs-button>
            <vs-button color="danger" type="gradient" >Delete</vs-button>
          </vs-row>
        </div>
  </vx-card>

css：

.myoverflow{
  text-overflow: ellipsis;
  height: 100px;
  width: 100%;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
}

.myoverflow{
  text-overflow: ellipsis;
  height: 100px;
  width: 100%;
  display: block;
  white-space: normal;
  overflow: hidden;
}

Answer 1

这应该可以解决您的问题：

.myoverflow{
 -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

附加的jsfiddle：

https://jsfiddle.net/3d6fhrcL/