How to display only 3 lines using CSS3

Question

I've added CSS that truncate text to 3 lines, but after truncating, it repeats title after 3 dots.here is snapshot.

enter image description here

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

follow this http://stackoverflow.com/questions/3922739/limit-text-length-to-n-lines-using-css — Roy Sonasish, Jul 15 '15 at 09:37
@RoySonasish That solution does not work with paragraph and anchor tag. — Suraj, Jul 15 '15 at 09:46

Panchanand Mahto · Answer 1 · 2015-07-15T09:45:22.237

1

Add height property of paragraph in 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;
}

edited Jul 15 '15 at 09:45

answered Jul 15 '15 at 09:40

Panchanand Mahto

151
8

After ellipsis (3 dots ), it still repeats the title. – Suraj Jul 15 '15 at 09:44

How to display only 3 lines using CSS3

1 Answers1