Egenskapen text-overflow

Egenskapen text-overflow lägger till en ellips i slutet av avklippt text för att indikera att texten inte fick plats i blocket och har klippts av.

För att egenskapen ska fungera måste texten klippas av via egenskapen overflow eller egenskapen overflow-x med värdet hidden, auto eller scroll. Om visible är angivet (vilket det är som standard) - kommer text-overflow inte att fungera.

Syntax

cssselektor {
  text-overflow: ellipsis | clip;
}

Värden

Standardvärde: clip.

Exempel . Text som sticker ut

I detta exempel kommer ett mycket långt ord inte att få plats i containern och kommer att sticka ut utanför dess gränser. Ingen avklippning sker:

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;
}

Результат:

Exempel . Vi lägger till egenskapen overflow

Nu kommer allt som sticker ut utanför containerns gränser att klippas av:

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;
}

Результат:

Exempel . Värdet ellipsis

Nu lägger vi till text-overflow med värdet ellipsis, utöver egenskapen overflow. En ellips kommer att läggas till i slutet av den avklippta texten:

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;
}

Результат:

Exempel . Med rullningslister

Om du anger overflow: auto och text-overflow: ellipsis, kommer en rullningslist att visas, men ellipsen kommer fortfarande att läggas till. Försök att rulla rullningslisten i exemplet:

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;
}

Результат:

Exempel . Om det inte finns några väldigt långa ord

Om det inte finns några tillräckligt långa ord som sticker ut utanför containerns gränser, kommer ingen avklippning att ske (ingenting sticker ju ut). Titta på följande exempel:

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;
}

Результат:

Exempel . Text på en rad

Det finns dock situationer där vi vill att texten ska klippas av om den är för lång (hela texten, inte enskilda ord) och inte brytas till nästa rad. Detta görs genom att lägga till egenskapen white-space med värdet nowrap, vilket förbjuder radbrytning. Titta på exemplet, nu klipps texten av:

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;
}

Результат:

Exempel . Bredd i procent

Om du anger blockets bredd i %, kommer avklippningen också att fungera korrekt:

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;
}

Результат:

Se även