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 obszarze wyznaczonym przez jedną z krawędzi obszaru zawartości elementu HTML nie występują żadne dodatkowe znaki świadczące o niemieszczącym się tekście.
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 obszarze wyznaczonym przez prawą krawędź obszaru zawartości przykładowego elementu "div" nie występują żadne dodatkowe znaki świadczące o niemieszczącym się tekście.
<!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;
padding:1em;
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 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 obszarze wyznaczonym przez jedną z krawędzi obszaru zawartości tego elementu HTML pojawią się dodatkowe znaki w postaci trzech kropek.
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 obszarze wyznaczonym przez prawą krawędź 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".
<!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;
padding:1em;
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>
