Egenskapen text-overflow

Egenskapen text-overflow legger til en ellipse på slutten av avkortet tekst for å indikere at teksten ikke fikk plass i blokken og ble avkortet.

For at egenskapen skal fungere, må teksten være avkortet via egenskapen overflow eller egenskapen overflow-x med verdien hidden, auto eller scroll. Hvis den er satt til visible (som er default) - vil ikke text-overflow fungere.

Syntaks

velger {
	text-overflow: ellipsis | clip;
}

Verdier

Verdi	Beskrivelse
`ellipsis`	Legger til en ellipse på slutten av avkortet tekst.
`clip`	Legger ikke til ellipse på slutten (dette er standardverdien, brukes for å oppheve egenskapens virkning om nødvendig).

Standardverdi: clip.

Eksempel . Tekst som flyter utenfor

I dette eksemplet vil et veldig langt ord ikke få plass i beholderen og vil flyte utenfor grensene. Det skjer ingen avkorting:

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

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

Eksempel . La oss legge til egenskapen overflow

Nå vil alt som flyter utenfor beholderens grenser, blir avkortet:

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

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

Eksempel . Verdien ellipsis

Nå vil vi, i tillegg til egenskapen overflow, også legge til text-overflow med verdien ellipsis. Den avkortede teksten vil få en ellipse på slutten:

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

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

Eksempel . Med rullefelt

Hvis du setter overflow: auto og text-overflow: ellipsis, vil det dukke opp et rullefelt, men ellipsen vil fortsatt bli lagt til. Prøv å rulle rullefeltet i eksemplet:

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

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

Eksempel . Hvis det ikke er veldig lange ord

Hvis det ikke er så lange ord at de flyter utenfor beholderens grense, vil det ikke skje noen avkorting (ingenting flyter ut). Se på følgende eksempel:

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

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

Eksempel . Tekst på én linje

Imidlertid er det situasjoner der vi ønsker at teksten skal avkortes hvis den er for lang (teksten generelt, ikke enkelte ord) og ikke brytes over på neste linje. Dette gjøres ved å legge til egenskapen white-space med verdien nowrap, som forbyr linjebryting av teksten. Se på eksemplet, nå blir teksten avkortet:

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

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

Eksempel . Bredde i prosent

Hvis du setter bredden på blokken i %, vil avkorting også fungere korrekt:

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

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

Se også

egenskapene word-break og overflow-wrap,
som tillater å flytte bokstavene i et langt ord over på en ny linje
egenskapen hyphens,
som aktiverer orddeling ved stavelsesgrenser
egenskapen overflow,
som avkorter deler som flyter utenfor blokkens grense