Ostatnio edytowany:

hyphens

Autor: Virtual Patriot

Opis właściwości hyphens

Za pomocą właściwości hyphens możemy określić czy znaki łącznika (dywizu) mogą dzielić wyrazy tekstu interesującego nas elementu HTML pomiędzy wiersze tego elementu HTML.

Informacje dodatkowe

manualnie znak łącznika do kodu HTML możemy dodać za pomocą kombinacji znaków ­

Dodatkowe techniczne informacje o właściwości hyphens

przeznaczenie

element HTML każdego typu

dziedziczenie

tak

wartość initial

manual

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

Interpretacja właściwości hyphens

Firefox

tak

Google Chrome

nie

Safari

tak, lecz z przedrostkiem -webkit-

Opera

nie

Internet Explorer

tak, lecz z przedrostkiem -ms- oraz od wersji 10

Edge

tak, lecz z przedrostkiem -ms-

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

Opis wartości właściwości hyphens

manual

Opis

Wartość manual jest domyślną wartością właściwości hyphens.

Domyślnie, gdy do wyrazu tekstu elementu HTML manualnie dodamy znak łącznika (­), wspomniany znak łącznika może podzielić wyraz pomiędzy wiersze elementu HTML.

Przykład

  hyphens:manual;
ten tekst wyświetlony w oknie prze­glą­da­rki internetowej został umieszczony w zawartości tego przy­kła­do­wego elementu "div" wyłącznie w celach prezentacyjnych

Tylko manualnie dodane do wyrazów tekstu przykładowego elementu "div" znaki łącznika, gdy jest to konieczne, mogą podzielić wspomniane wyrazy pomiędzy wiersze przykładowego elementu "div".

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>
      ten tekst wyświetlony w oknie prze&shy;glą&shy;da&shy;rki internetowej został umieszczony w zawartości tego przy&shy;kła&shy;do&shy;wego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

auto

Opis

Za pomocą wartości auto właściwości hyphens możemy sprawić, że przeglądarka internetowa sama zdecyduje, gdzie w wyrazach tekstu interesującego nas elementu HTML powinny wystąpić znaki łącznika. Ponadto, gdy do tekstu interesującego nas elementu HTML manualnie zostały dodane znaki łącznika (&shy;), wspomniane znaki łącznika mają pierwszeństwo przed znakami łącznika automatycznie tworzonymi przez przeglądarkę internetową.

Przykład

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

Jeżeli było to konieczne do wyrazów tekstu przykładowego elementu "div" przez przeglądarkę internetową automatycznie zostały dodane dodatkowe znaki łącznika, ponieważ do wspomnianego elementu "div" została dodana właściwość "hyphens" wraz z wartością "auto".

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 {
        hyphens:auto;
        -webkit-hyphens:auto;
        -ms-hyphens:auto;
        width:350px;
        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>

none

Opis

Za pomocą wartości none właściwości hyphens możemy sprawić, że ewentualne znaki łącznika (&shy;) występujące w wyrazach tekstu interesującego nas elementu HTML będą ignorowane przez przeglądarkę internetową.

Przykład

  hyphens:none;
ten tekst wyświetlony w oknie prze­glą­da­rki internetowej został umieszczony w zawartości tego przy­kła­do­wego elementu "div" wyłącznie w celach prezentacyjnych

Wszystkie znaki łącznika występujące w wyrazach tekstu przykładowego elementu "div" są ignorowane przez przeglądarkę internetową, ponieważ do wspomnianego elementu "div" została dodana właściwość "hyphens" wraz z wartością "none".

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 {
        hyphens:none;
        -webkit-hyphens:none;
        -ms-hyphens:none;
        width:350px;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie prze&shy;glą&shy;da&shy;rki internetowej został umieszczony w zawartości tego przy&shy;kła&shy;do&shy;wego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>