how to make extras lines to hide with "..." with only two line

Question

How to make extras lines hide with "..." ellipsis?

my code is

<p className="detail">
random string The Glenwood Plan boasts 3 bedrooms -2 baths. Interior Paint is Sherwin Williams Agreeable Gray with Extra White Ceilings boasts 3 bedrooms -2 baths. Interior Paint is Sherwin Williams Agreeable Gray with Extra White Ceilings boasts 3 bedrooms -2 baths. Interior Paint is Sherwin Williams Agreeable Gray with Extra White Ceilings boasts 3 bedrooms -2 baths. Interior Paint is Sherwin Williams Agreeable Gray with Extra White Ceilings boasts 3 bedrooms -2 baths. Interior Paint is Sherwin Williams Agreeable Gray with Extra White Ceilings
</p>

output in html page

random string The Glenwood Plan boasts 3 bedrooms -2 baths. Interior Paint is Sherwin Williams Agreeable Gray with Extra White Ceilings boasts 3 bedrooms -2 baths. Interior Paint is Sherwin Williams Agreeable Gray with Extra White Ceilings boasts 3 bedrooms -2 baths. Interior Paint is Sherwin Williams Agreeable Gray with Extra White Ceilings boasts 3 bedrooms -2 baths. Interior Paint is Sherwin Williams Agreeable Gray with Extra White Ceilings boasts 3 bedrooms -2 baths. Interior Paint is Sherwin Williams Agreeable Gray with Extra White Ceilings

but I want to show output in just two lines and other words I don't want to show

So new output i want to show is

random string The Glenwood Plan boasts 3 bedrooms -2 baths. Interior Paint is Sherwin Williams Agreeable Gray with Extra White Ceilings boasts 3 bedrooms -2 baths. Interior...

and at last I want to show ...

so any code for this ?

[Many more answers](https://www.google.com/search?q=add+ellipsis+after+lines+site:stackoverflow.com) — mplungjan, Dec 01 '21 at 12:24

score 1 · Answer 1 · answered Dec 01 '21 at 12:26

1

Use line clamp: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp

sample code:

p {
  width: 300px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

answered Dec 01 '21 at 12:26

fixiabis

363
1
8

score 0 · Answer 2 · answered Dec 01 '21 at 12:24

Use the line-clamp property:

.detail {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

<p class="detail">
  random string The Glenwood Plan boasts 3 bedrooms -2 baths. Interior Paint is Sherwin Williams Agreeable Gray with Extra White Ceilings boasts 3 bedrooms -2 baths. Interior Paint is Sherwin Williams Agreeable Gray with Extra White Ceilings boasts 3 bedrooms
  -2 baths. Interior Paint is Sherwin Williams Agreeable Gray with Extra White Ceilings boasts 3 bedrooms -2 baths. Interior Paint is Sherwin Williams Agreeable Gray with Extra White Ceilings boasts 3 bedrooms -2 baths. Interior Paint is Sherwin Williams
  Agreeable Gray with Extra White Ceilings
</p>

how to make extras lines to hide with "..." with only two line

2 Answers2