How to Customize Ellipsis Text with Line Clamp in CSS?-CSS Tutorial-php.cn

How to Customize Ellipsis Text with Line Clamp in CSS?

Susan Sarandon

Release： 2024-12-03 02:54:11

Original

937 people have browsed it

How to Customize Ellipsis Text with Line Clamp in CSS?

Custom Ellipsis Text with Line Clamp

Problem:

Hiding a part of the text that exceeds two lines while indicating the hidden overflow with a custom text, like "...123 T."

Solution:

In the future, the line-clamp property will provide a convenient one-line solution:

line-clamp: 2 "...123 T.";

Copy after login

Hacky Alternative (for Current Browsers):

Until the line-clamp property is widely supported, a hacky workaround involves the following CSS and HTML:

CSS:

.container {
  max-width: 200px;
  margin: 5px;
}

.main-text {
  line-height: 1.2em; 
  max-height: calc(2 * 1.2em); 
  overflow: hidden;
  display: inline-block;
  position: relative;
}

.main-text:after {
  content: "123 T.";
  display:inline-block;
  width:40px;
  position:relative;
  z-index:999;
  box-shadow:
    40px 0 0 #fff,
    80px 0 0 #fff,
    120px 0 0 #fff,
    160px 0 0 #fff;
  color: #8e8f8f;
  font-size: 10px;
  background: #fff;
  margin-left:2px;
}

.main-text span {
  position: absolute;
  top: 1.2em;
  right: 0;
  padding: 0 3px;
  background: #fff;
}

.main-text span:before {
  content: "..."; 
}

.main-text span:after {
  content: "123 T.";
  color: #8e8f8f;
  font-size: 10px;
}

Copy after login

HTML:

<div class="container">
  <div class="main-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus mi, dapibus sit amet posuere eu, porttitor condimentum nulla. Donec convallis lorem justo, eget malesuada lorem tempor vitae. Aliquam sollicitudin lacus ipsum, at tincidunt ante condimentum
    vitae. <span></span>
  </div>
</div>

<div class="container">
  <div class="main-text">
    Lorem ipsum <span></span>
  </div>
</div>

<div class="container">
  <div class="main-text">
    Lo <span></span>
  </div>
</div>

<div class="container">
  <div class="main-text">
    Lorem ipsum dolor sit ameta, adipiscing elit. Nam metus <span></span>
  </div>
</div>

<div class="container">
  <div class="main-text">
    Lorem ipsum dolor sit ameta, adipiscing elit <span></span>
  </div>
</div>

Copy after login

Note: This workaround involves creating a hidden span to replace the ellipsis and using a large box shadow to hide the text behind. It's not an ideal solution but provides a temporary fix until line-clamp is widely adopted.

The above is the detailed content of How to Customize Ellipsis Text with Line Clamp in CSS?. For more information, please follow other related articles on the PHP Chinese website!