СSS Свойство text-overflow
Пример
Использование свойства text-overflow:
div
{
white-space: nowrap;
overflow:
hidden;
text-overflow: ellipsis;
}
Редактор кода »
Определение и использование
Свойство text-overflow свойство указывает, как переполняется содержимое, которое не является должным быть доведено до пользователя. Оно может быть обрезано, отображаться многоточие (...), или отобразит пользовательскую строку.
Для переполнения текста требуются оба следующих свойства:
- white-space: nowrap;
- overflow: hidden;
| Значение по умолчанию: | clip |
|---|---|
| Унаследованный: | нет |
| Анимируемый: | нет Прочитайте о animatable |
| Версия: | CSS3 |
| JavaScript синтаксис: | object.style.textOverflow="ellipsis" Попробовать |
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Числа, за которыми следует -o- указывают первую версию, которая работала с префиксом.
| Свойство | |||||
|---|---|---|---|---|---|
| text-overflow | 4.0 | 6.0 | 7.0 | 3.1 | 11.0 9.0 -o- |
CSS Синтаксис
text-overflow: clip|ellipsis|string|initial|inherit;
Значение свойств
| Значение | Описание | Воспроизвести |
|---|---|---|
| clip | Значение по умолчанию. Текст обрезается и недоступен | Воспроизвести » |
| ellipsis | Нарисует многоточие ("...") для представления обрезанного текста | Воспроизвести » |
| string | Визуализация данной строки для представления обрезанного текста | |
| initial | Устанавливает для этого свойства значение по умолчанию. Прочитайте о initial | Воспроизвести » |
| inherit | Наследует это свойство от родительского элемента. Прочитайте о inherit |
Примеры
Пример
Текст переполнен с эффектом наведения (показывать весь текст при наведении):
div.a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div.a:hover {
overflow: visible;
}
Редактор кода »
Связанные страницы
CSS Учебник: CSS Эффект текста
HTML DOM Справочник: Свойство textOverflow
