html - 使用 Ionic 限制文本高度和宽度的省略号

Question

我试图限制我的文本宽度和高度，我在我的 CSS 文件中使用了 text-overflow: ellipsis 但我得到了这个结果:

我的 CSS 是:

.ellipsis{
    white-space: nowrap;
    width: 12em;
    height: 12em;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid #000000; }

Answer 1

Chrome 的多行省略号。您可以使用 -webkit-line-clamp 指定要显示的行数。更多技巧 here

.ellipsis {
  width: 12em;
  overflow: hidden;
  border: 1px solid #000000;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

<p class="ellipsis">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
</p>