CODEWITHSUNDEEP
htmlcss
Augusto
Augusto

Reputation: 4243

How to clip text to not overflow the below component on CSS?

This is my current work:

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>

I want that the red text clips before overflow the black div and ends with '...'. How I do it?

Upvotes: 0

Views: 40

Answers (2)

Par Tha
Par Tha

Reputation: 1531

Try update your css with below code

.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 */
}

OUTPUT

enter image description here

Upvotes: 1

MrRobboto
MrRobboto

Reputation: 752

You just do overflow: hidden on the your parent element:

.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>

Upvotes: 0

Related Questions