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

Question

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>

What is wrong? your code is working as you want in your description — law_81
– law_81, Commented Dec 27, 2022 at 8:14
It is currently working normally, but it may fail if it is in safari or IE, so I would like to ask if there is a better way! Make compatibility bette — AWEI
– AWEI, Commented Dec 27, 2022 at 8:20
It seems to work to me. Are you reading some out of date documentation? — A Haworth
– A Haworth, Commented Dec 27, 2022 at 9:31

tibalt · Accepted Answer · 2024-06-04 12:57:15Z

6

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

answered Jun 4, 2024 at 12:57

tibalt

16.4k1 gold badge33 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Steve James · Accepted Answer · 2022-12-29 08:12:33Z

1

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

answered Dec 29, 2022 at 8:12

Steve James

3721 silver badge9 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related