Comment personnaliser le texte Ellipsis avec Line Clamp en 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.";

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

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>

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!