text-overflow հատկությունը

text-overflow հատկությունը ավելացնում է բազմակետեր կտրված տեքստի վերջում՝ ցույց տալու, որ տեքստը չի տեղավորվել բլոկում և կտրվել է:

Հատկության աշխատանքի համար տեքստը պետք է կտրված լինի overflow կամ overflow-x հատկությունների միջոցով՝ hidden, auto կամ scroll արժեքներով: Եթե տրված է visible (ինչը լռելյայն արժեքն է) - text-overflow հատկությունը չի աշխատի:

Շարահյուսություն

cssընտրիչ {
  text-overflow: ellipsis | clip;
}

Արժեքներ

Լռելյայն արժեքը՝ clip:

Օրինակ . Դուրս ցցված տեքստ

Այս օրինակում շատ երկար բառը չի տեղավորվի կոնտեյներում և դուրս կգա նրա սահմաններից: Կտրում չի կատարվում:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur loooooooooooooooooooooooooooooooongword
  adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: visible;
  border: 1px solid red;
}

Результат:

Օրինակ . Ավելացնենք overflow հատկությունը

Այժմ կոնտեյների սահմաններից դուրս ցցված ամեն ինչ պարզապես կկտրվի:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur loooooooooooooooooooooooooooooooongword
  adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: hidden;
  border: 1px solid red;
}

Результат:

Օրինակ . Ellipsis արժեքը

Այժմ overflow հատկությանը կավելացնենք նաև text-overflow հատկությունը ellipsis արժեքով: Կտրված տեքստի վերջում կավելացվի բազմակետեր:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur loooooooooooooooooooooooooooooooongword
  adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

Օրինակ . Ոլորման գծերով

Եթե տրվի overflow: auto և text-overflow: ellipsis, ապա կհայտնվի ոլորման գիծ, բայց բազմակետերը կմնան: Փորձեք ոլորել օրինակի ոլորման գիծը:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur loooooooooooooooooooooooooooooooongword
  adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: auto;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

Օրինակ . Եթե չկան շատ երկար բառեր

Եթե չկան այնքան երկար բառեր, որ դրանք դուրս գան կոնտեյների սահմաններից, ապա կտրում չի կատարվի (ոչինչ չի դուրս գալիս): Նայեք հաջորդ օրինակին:

html<div id="elem">
  Lorem ipsum dolor sit amet adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

Օրինակ . Մեկ տողով տեքստ

Սակայն, լինում են իրավիճակներ, երբ մենք ուզում ենք, որ տեքստը կտրվի, եթե այն շատ երկար է (ընդհանուր տեքստը, ոչ թե առանձին բառեր) և չ տեղափոխվի հաջորդ տող: Դա արվում է white-space հատկության ավելացմամբ՝ nowrap արժեքով, որը կարգելի տեքստի տեղափոխումը մեկ այլ տող: Նայեք օրինակին, այժմ տեքստը կտրվում է:

html<div id="elem">
  Lorem ipsum dolor sit amet adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

Օրինակ . Լայնությունը տոկոսներով

Եթե բլոկի լայնությունը տրվի %-ով, ապա կտրումը նույնպես կաշխատի ճիշտ:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur loooooooooooooooooooooooooooooooongword
  adipiscing elit.
</div>

css#elem {
  width: 80%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

Տես նաև