line-clamp ဂုဏ်သတ္တိ

line-clamp ဂုဏ်သတ္တိသည် စာသားကို သတ်မှတ်ထားသော စာကြောင်းအရေအတွက်အထိသာ ပြသပါသည်။ ပိုလျှံနေသော စာကြောင်းများအစား စာသားတွင် အစက်သုံးစက် (ellipsis) ကို ထည့်သွင်းပြသပေးပါသည်။

ဖွဲ့စည်းပုံ

cssselector {
  line-clamp: none | number-of-lines
}

နမူနာ

ကျွန်ုပ်တို့၏ စာသားကို စာကြောင်းနှစ်ကြောင်းအထိသာ ကန့်သတ်ကြည့်ရအောင်။

html<p>
  စာသား စာသား စာသား စာသား စာသား စာသား စာသား စာသား
  စာသား စာသား စာသား စာသား စာသား စာသား စာသား စာသား
  စာသား စာသား စာသား စာသား စာသား စာသား စာသား စာသား
  စာသား စာသား စာသား စာသား စာသား စာသား စာသား စာသား
</p>

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

Результат: