Ostatnio edytowany:

word-break

Autor: Virtual Patriot

Opis właściwości word-break

Za pomocą właściwości word-break możemy określić sposób przełamywania do następnego wiersza wyrazów tekstu interesującego nas elementu HTML. Mowa tu o wyrazach należących do różnych rodzajów pism (pisma łacińskiego, pisma arabskiego, pisma azjatyckiego itp.).

Dodatkowe techniczne informacje o właściwości word-break

przeznaczenie

element HTML każdego typu

dziedziczenie

tak

wartość initial

normal

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

Interpretacja właściwości word-break

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 word-break

normal

Opis

Wartość normal jest domyślną wartością właściwości word-break.

Cechy wartości normal właściwości word-break

  • wyrazy składające się ze znaków pisma łacińskiego nie mogą zostać przełamane do następnego wiersza pomiędzy swoimi znakami
  • wyrazy składające się ze znaków pisma arabskiego nie mogą zostać przełamane do następnego wiersza pomiędzy swoimi znakami
  • wyrazy składające się ze znaków pisma azjatyckiego mogą zostać przełamane do następnego wiersza pomiędzy swoimi znakami

Przykład

  word-break:normal;
to jest jakiś przykładowy tekst znajdujący się w obszarze zawartości tego elementu "div" نوشتنننوشتنننوشتنننوشتنننوشتنننوشتن ننوشت نننوش تنننو شتننن وشتنن نوشتنننو 電報碼 碼電報碼電報碼電 報碼電報電報電報電報電報 電報 電報 電報 電報

Domyślny sposób przełamywania do następnego wiersza wyrazów tekstu przykładowego elementu "div" nie został zmieniony.

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;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      to jest jakiś przykładowy tekst znajdujący się w obszarze zawartości tego elementu "div" نوشتنننوشتنننوشتنننوشتنننوشتنننوشتن ننوشت نننوش تنننو شتننن وشتنن نوشتنننو 電報碼 碼電報碼電報碼電 報碼電報電報電報電報電報 電報 電報 電報 電報
    </div>

  </body>
</html>

keep-all

Opis

Za pomocą wartości keep-all właściwości word-break możemy zmienić sposób przełamywania do następnego wiersza wyrazów tekstu interesującego nas elementu HTML.

Cechy wartości keep-all właściwości word-break

  • wyrazy składające się ze znaków pisma łacińskiego nie mogą zostać przełamane do następnego wiersza pomiędzy swoimi znakami
  • wyrazy składające się ze znaków pisma arabskiego nie mogą zostać przełamane do następnego wiersza pomiędzy swoimi znakami
  • wyrazy składające się ze znaków pisma azjatyckiego nie mogą zostać przełamane do następnego wiersza pomiędzy swoimi znakami

Przykład

  word-break:keep-all;
to jest jakiś przykładowy tekst znajdujący się w obszarze zawartości tego elementu "div" نوشتنننوشتنننوشتنننوشتنننوشتنننوشتن ننوشت نننوش تنننو شتننن وشتنن نوشتنننو 電報碼 碼電報碼電報碼電 報碼電報電報電報電報電報 電報 電報 電報 電報

Sposób przełamywania do następnego wiersza wyrazów tekstu przykładowego elementu "div" został zmieniony, ponieważ do wspomnianego elementu "div" została dodana właściwość "word-break" wraz z wartością "keep-all".

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 {
        word-break:keep-all;
        width:350px;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      to jest jakiś przykładowy tekst znajdujący się w obszarze zawartości tego elementu "div" نوشتنننوشتنننوشتنننوشتنننوشتنننوشتن ننوشت نننوش تنننو شتننن وشتنن نوشتنننو 電報碼 碼電報碼電報碼電 報碼電報電報電報電報電報 電報 電報 電報 電報
    </div>

  </body>
</html>

break-all

Opis

Za pomocą wartości break-all właściwości word-break możemy zmienić sposób przełamywania do następnego wiersza wyrazów tekstu interesującego nas elementu HTML.

Cechy wartości break-all właściwości word-break

  • wyrazy składające się ze znaków pisma łacińskiego mogą zostać przełamane do następnego wiersza pomiędzy swoimi znakami
  • wyrazy składające się ze znaków pisma arabskiego mogą zostać przełamane do następnego wiersza pomiędzy swoimi znakami
  • wyrazy składające się ze znaków pisma azjatyckiego mogą zostać przełamane do następnego wiersza pomiędzy swoimi znakami

Przykład

  word-break:break-all;
to jest jakiś przykładowy tekst znajdujący się w obszarze zawartości tego elementu "div" نوشتنننوشتنننوشتنننوشتنننوشتنننوشتن ننوشت نننوش تنننو شتننن وشتنن نوشتنننو 電報碼 碼電報碼電報碼電 報碼電報電報電報電報電報 電報 電報 電報 電報

Sposób przełamywania do następnego wiersza wyrazów tekstu przykładowego elementu "div" został zmieniony, ponieważ do wspomnianego elementu "div" została dodana właściwość "word-break" wraz z wartością "break-all".

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 {
        word-break:break-all;
        width:350px;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      to jest jakiś przykładowy tekst znajdujący się w obszarze zawartości tego elementu "div" نوشتنننوشتنننوشتنننوشتنننوشتنننوشتن ننوشت نننوش تنننو شتننن وشتنن نوشتنننو 電報碼 碼電報碼電報碼電 報碼電報電報電報電報電報 電報 電報 電報 電報
    </div>

  </body>
</html>