Тег CSS text-overflow з прикладом
Тег CSS text-overflow визначає, як текст поводиться в блоці, якщо його повністю не вистачає в зазначеній області. Є два варіанти: текст обрізається; текст обрізається і до кінця рядка додається троєкрапка. text-overflow працює, якщо для блоку встановлене значення властивості overflow як auto, scroll або hidden.
Синтаксис
text-overflow: clip | ellipsis
Значення
- clip
- Текст обрізається за розміром області.
- ellipsis
- Текст обрізається і до кінця рядка додається троєкрапка.
Приклад
HTML5CSS3IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text-overflow</title>
<style>
p.clip {
white-space: nowrap; /* Забороняємо переноси рядків */
overflow: hidden; /* Обрізаємо все, що не вміщується в область */
background: #fc0; /* Колір фону */
padding: 5px; /* Відступи навколо тексту */
text-overflow: ellipsis; /* Додаємо троєкрапку */
}
</style>
</head>
<body>
<p class="clip">Магнітне поле мізерно гасить великий коло небесної сфери,
в такому випадку ексцентриситети і нахили орбіт зростають.</p>
</body>
</html>Результат цього прикладу показано на рис. 1.
Браузери
Opera від версії 9.0 до версії 11.0 використовує нестандартну властивість -o-text-overflow.