CODEWITHSUNDEEP
javascripthtmljquerycss
AWEI
AWEI

Reputation: 427

How to display a maximum of two lines of text through CSS or javascript, and omit it if it exceeds

I am currently encountering a requirement. I hope that the text can be limited to two lines and the ellipsis must appear~ At present, I can use the following CSS method to complete it, but it seems that the compatibility is not very good. It will only work in chrome. If you use other browsers, it will work. invalidated. So I would like to ask everyone, how should we usually do this in a formal way? At the same time, it is compatible with all major browsers. Thank you for watching my question.

p {
  width: 300px;
  font-size: 14px;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque, tempora, suscipit explicabo quos iure eveniet eaque veritatis perspiciatis ullam quibusdam amet. Debitis magni dignissimos cupiditate deleniti, eligendi expedita at eos vel tempora deserunt
  iure delectus numquam et odio minus a natus excepturi odit magnam labore? Autem accusamus voluptates alias? Qui maxime itaque voluptate velit vero sit temporibus aliquid! Veritatis nesciunt quos mollitia ipsa eum enim sunt hic aut qui odio ex, rerum
  fuga deleniti adipisci cumque, reprehenderit nihil pariatur quis officia voluptates. Dolorem sit, sequi veritatis obcaecati ratione dolore explicabo? Eum possimus voluptates pariatur similique eveniet repellendus, recusandae nihil quas!</p>

Upvotes: 1

Views: 3299

Answers (2)

tibalt
tibalt

Reputation: 16164

Use line-clamp

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

https://codepen.io/walickialbert/pen/eYEoRvj

Upvotes: 3

Steve James
Steve James

Reputation: 362

Try this using max-height property. and if content is greater than the max height you can add ellipsis using jquery and css.

p {max-height:32px;}

Try this fiddle, JSFIDDLE

Upvotes: 1

Related Questions