html - 如何使用 CSS3 只显示 3 行

Question

我添加了将文本截断为 3 行的 CSS，但截断后，它会在 3 个点后重复标题。这是快照。

HTML

<p class="ccm-page-list-title">
<a href="/concrete5">Weight Plate Barbell Racking Calculator Imperial Units (Pounds) Weight Plate Barbell</a>

CSS

p.ccm-page-list-title {
  -webkit-line-clamp: 3;
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
    height: 90px;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  padding-top: 5px;
}

Link of Page

Answer 1

在css中添加段落的高度属性

p.ccm-page-list-title {
  -webkit-line-clamp: 3;
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;

  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  padding-top: 5px;
  
  height:48px;
}