Ostatnio edytowany:

text-overflow

Autor: Virtual Patriot

Opis właściwości text-overflow

Za pomocą właściwości text-overflow możemy określić jakie dodatkowe znaki powinny pojawić się w miejscu, gdzie tekst interesującego nas elementu HTML nie mieści się w rozmiarze szerokości obszaru zawartości tego elementu HTML. Mowa tu o elemencie HTML, którego właściwość overflow posiada wartość różną od wartości visible.

Dodatkowe techniczne informacje o właściwości text-overflow

przeznaczenie

element HTML tworzący blok treści oraz posiadający właściwość overflow wraz z wartością różną od wartości visible

dziedziczenie

nie

wartość initial

clip

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

Interpretacja właściwości text-overflow

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Zobacz więcej informacji o interpretacji właściwości .

Opis wartości właściwości text-overflow

clip

Opis

Wartość clip jest domyślną wartością właściwości text-overflow.

Domyślnie w miejscu, gdzie tekst elementu HTML nie mieści się w rozmiarze szerokości obszaru zawartości tego elementu HTML nie występują żadne dodatkowe znaki świadczące o niemieszczącym się tekście.

Przykład

  text-overflow:clip;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

W miejscu, gdzie tekst przykładowego elementu "div" nie mieści się w rozmiarze szerokości obszaru zawartości przykładowego elementu "div" nie występują żadne dodatkowe znaki świadczące o niemieszczącym się tekście.

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        width:350px;
        white-space:nowrap;
        overflow:hidden;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

ellipsis

Opis

Za pomocą wartości ellipsis właściwości text-overflow możemy sprawić, że w miejscu, gdzie tekst interesującego nas elementu HTML nie mieści się w rozmiarze szerokości obszaru zawartości tego elementu HTML pojawią się dodatkowe znaki w postaci trzech kropek.

Przykład

  text-overflow:ellipsis;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

W miejscu, gdzie tekst przykładowego elementu "div" nie mieści się w rozmiarze szerokości obszaru zawartości przykładowego elementu "div" pojawiły się dodatkowe znaki w postaci trzech kropek, ponieważ do wspomnianego elementu "div" została dodana właściwość "text-overflow" wraz z wartością "ellipsis".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        text-overflow:ellipsis;
        width:350px;
        white-space:nowrap;
        overflow:hidden;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>