Īpašība text-overflow

Īpašība text-overflow pievieno daudzpunkti apgrieztā teksta beigās kā pazīmi, ka teksts neietilpa blokā un tika apgriezts.

Lai īpašība darbotos, tekstam jābūt apgrieztam ar īpašību overflow vai īpašību overflow-x ar vērtību hidden, auto vai scroll. Ja ir iestatīts visible (kas ir noklusējuma vērtība) - text-overflow nedarbosies.

Sintakse

cssselektors {
  text-overflow: ellipsis | clip;
}

Vērtības

Noklusējuma vērtība: clip.

Piemērs . Teksts, kas izkļūst ārpus robežām

Šajā piemērā ļoti garš vārds neietilps konteinerā un izkļūs ārpus tā robežām. Apgriešana nenotiek:

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

Результат:

Piemērs . Pievienosim īpašību overflow

Tagad viss, kas izkļuvis ārpus konteinera robežām, vienkārši tiks apgriezts:

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

Результат:

Piemērs . Vērtība ellipsis

Tagad papildus īpašībai overflow pievienosim vēl text-overflow ar vērtību ellipsis. Apgrieztajam tekstam beigās tiks pievienots daudzpunktis:

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

Результат:

Piemērs . Ar ritjoslām

Ja iestatīsiet overflow: auto un text-overflow: ellipsis, tad parādīsies ritjosla, bet daudzpunktis joprojām tiks pievienots. Mēģiniet ritināt ritjoslu piemērā:

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

Результат:

Piemērs . Ja nav ļoti garu vārdu

Ja nav tik garu vārdu, lai tie izkļūtu ārpus konteinera robežām, tad apgriešana nenotiks (nekas taču neizkļūst). Apskatiet šo piemēru:

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

Результат:

Piemērs . Teksts vienā rindā

Tomēr ir situācijas, kad mēs vēlamies, lai teksts tiktu apgriezts, ja tas ir pārāk garš (teksts kopumā, nevis atsevišķi vārdi) un neietilpst vienā rindā. To panāk ar īpašības white-space pievienošanu ar vērtību nowrap, kas aizliedz teksta pārnešanu uz citu rindu. Apskatiet piemēru, tagad teksts tiek apgriezts:

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

Результат:

Piemērs . Platums procentos

Ja iestatāt bloka platumu %, tad apgriešana arī darbosies korekti:

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

Результат:

Skatiet arī