Comment personnaliser le texte Ellipsis avec Line Clamp en CSS ?-tutoriel CSS-php.cn

Comment personnaliser le texte Ellipsis avec Line Clamp en CSS ?

Susan Sarandon

Libérer： 2024-12-03 02:54:11

original

939 Les gens l'ont consulté

How to Customize Ellipsis Text with Line Clamp in CSS?

Texte de points de suspension personnalisé avec pince à ligne

Problème :

Masquer une partie du texte qui dépasse deux lignes tout en indiquant le débordement caché avec un texte personnalisé, comme "...123 T."

Solution :

À l'avenir, la propriété line-clamp fournira une solution pratique à une seule ligne :

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

Copier après la connexion

Alternative hacky (pour les navigateurs actuels) :

Jusqu'à ce que la propriété line-clamp soit largement prise en charge, un La solution de contournement hacky implique les CSS et HTML suivants :

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;
}

Copier après la connexion

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>

Copier après la connexion

Remarque : Cette solution de contournement consiste à créer une étendue cachée pour remplacer les points de suspension et à utiliser une grande ombre de boîte pour masquer le texte. derrière. Ce n'est pas une solution idéale mais constitue une solution temporaire jusqu'à ce que le serrage de ligne soit largement adopté.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!