Voici mon travail actuel:

enter image description here

.sec {
  color: red;
  width: 200px;
}
<div style="height: 100px;">
  <div class="sec">
    Big textBig textBig textBig textBig textBig textBig text Big text Big textBig textBig textBig textBig text text Big textBig textBig textBig text Big textBig textBig textBig Big textBig textBig textBig textBig textBig textBig textBig textBig text
  </div>
</div>
<div style="height: 100px; background-color: black;">
</div>

Je veux que le texte rouge coupe avant de déborder le div noir et se termine par '...'. Comment je fais?

0
Augusto 7 nov. 2019 à 23:38

2 réponses

Vous faites juste un débordement: caché sur votre élément parent:

.sec {
  color: red;
  width: 200px;
}
<div style="height: 100px; overflow:hidden">
  <div class="sec">
    Big textBig textBig textBig textBig textBig textBig text Big text Big textBig textBig textBig textBig text text Big textBig textBig textBig text Big textBig textBig textBig Big textBig textBig textBig textBig textBig textBig textBig textBig text
  </div>
</div>
<div style="height: 100px; background-color: black;">
</div>
0
MrRobboto 7 nov. 2019 à 20:45

Essayez de mettre à jour votre CSS avec le code ci-dessous

.sec {
  color: red;
  width: 200px;
  overflow: hidden;               /* Newly added */
  text-overflow: ellipsis;        /* Newly added */
  display: -webkit-box;           /* Newly added */
  -webkit-line-clamp: 4;          /* Newly added */
  -webkit-box-orient: vertical;   /* Newly added */
}

PRODUCTION

enter image description here

1
Par Tha 7 nov. 2019 à 20:51