line-clamp xususiyati

left xususiyati matnni ko'rsatilgan qatorlar soniga cheklaydi. Matndagi ortiqcha qatorlar o'rniga uch nuqa qo'yiladi.

Sintaksis

cssselektor {
  line-clamp: none | qatorlar soni
}

Misol

Keling, matnimizni ikkita qatorga cheklaymiz:

html<p>
  matn matn matn matn matn matn matn matn
  matn matn matn matn matn matn matn matn
  matn matn matn matn matn matn matn matn
  matn matn matn matn matn matn matn matn
</p>

cssbody {
  width: 200px;
  height: 100px;
}
p {
  -webkit-line-clamp: 2;
  line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Результат: