Question

我当前正在为我的应用创建一个新功能。我已经建立了一个包含离子项目的离子列表。这些项目包含多个标签和按钮。这些标签之一应最多显示3行，并剪掉其余标签。
我应该在CSS中实现在3行后剪切行吗？

我已经尝试过使用“ max-lines” CSS属性和用户提供的其他几种解决方案，但是没有一个对我有用。

.questionText {
    height: 75%;
    word-break: break-word;
    white-space: normal;
    max-lines: 3;
    padding-top: 3%;
    padding-bottom: 3%;
}

 <ion-item>
      <div class = "leftContainer">
        <ion-label class = "questionHeading">
          Just a random heading
        </ion-label>
        <ion-label class = "questionText">
          This is just a random text which is supposed to cut after 3 lines. To fill this capacity, I will paste some lorem now: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </ion-label>
      </div>
 </ion-item>

当前显示的是标签的所有行，由于空白和断行，本来应该这样做，但是应该在3点后剪掉。

Answer 1

行高*行数=最大高度

.questionText {
max-height: 5.4em;
line-height: 1.8em;
height: 75%;
white-space: normal;
}

如何设置离子标记的最大行数？

1 个答案: