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.
hyphens:manual;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
Tylko manualnie dodane do wyrazów tekstu przykładowego elementu "div" znaki łącznika mogą (gdy jest to konieczne) podzielić wspomniane wyrazy pomiędzy wiersze przykładowego elementu "div".
<!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:#7DCDE8;
}
</style>
</head>
<body>
<div>
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
</div>
</body>
</html>
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 (­), wspomniane znaki łącznika mają pierwszeństwo przed znakami łącznika automatycznie tworzonymi przez przeglądarkę internetową.
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".
<!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:#7DCDE8;
}
</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>
Za pomocą wartości none właściwości hyphens możemy sprawić, że ewentualne znaki łącznika (­) występujące w wyrazach tekstu interesującego nas elementu HTML będą ignorowane przez przeglądarkę internetową.
hyphens:none;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego 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".
<!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:#7DCDE8;
}
</style>
</head>
<body>
<div>
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
</div>
</body>
</html>
