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 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.

Dla zaawansowanych

gdy element HTML posiada poziomy tryb zapisu treści, wtedy mowa tu o tekście niemieszczącym się w rozmiarze szerokości obszaru zawartości elementu HTML

gdy element HTML posiada pionowy tryb zapisu treści, wtedy mowa tu o tekście niemieszczącym się w rozmiarze wysokości obszaru zawartości elementu HTML

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

przeznaczenie
dziedziczenie
  • nie
wartość initial
wyjątki initial
  • brak
animowanie
  • nie

Interpretacja właściwości text-overflow

Firefox

tak

Google Chrome

tak

Nie interpretuje wartości ciąg znaków.

Safari

tak

Nie interpretuje wartości ciąg znaków.

Opera

tak

Nie interpretuje wartości ciąg znaków.

Internet Explorer

tak

Nie interpretuje wartości ciąg znaków.

Edge

tak

Nie interpretuje wartości ciąg znaków.

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 obszaru zawartości tego elementu HTML nie występują żadne dodatkowe znaki świadczące o niemieszczącym się tekście.

Przykład

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:#AFF;
      }
    </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 obszaru zawartości tego elementu HTML pojawią się dodatkowe znaki w postaci trzech kropek.

Przykład

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:#AFF;
      }
    </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>

ciąg znaków

Opis

Za pomocą właściwości text-overflow oraz dowolnego wybranego przez nas ciągu znaków możemy sprawić, że w miejscu, gdzie tekst interesującego nas elementu HTML nie mieści się w rozmiarze obszaru zawartości tego elementu HTML pojawią się dodatkowe znaki.

Przykład

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 myślników, ponieważ do wspomnianego elementu "div" została dodana właściwość "text-overflow" wraz z wartością "---".

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:'---';
        width:350px;
        white-space:nowrap;
        overflow:hidden;
        font-size:1.3em;
        background-color:#AFF;
      }
    </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>