06.11.2015 в 00:19:19 | Добавил: rayven | Просмотров: 1481 | 1 ответ

Описание Определяет параметры видимости текста в блоке, если текст целиком не помещается в заданную область. Возможны два варианта: текст обрезается; текст обрезается и к концу строки добавляется многоточие. text-overflow работает в том случае, если для блока значение свойства overflow установлено как auto, scroll или hidden. Синтаксис text-overflow: clip | ellipsis Значения clip Текст обрезается по размеру области. ellipsis Текст обрезается и к концу строки добавляется многоточие. Пример
Код
<!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>

Результат данного примера показан на картинке

| | обсудить на форуме | | Рейтинг: 5.0/2 | Теги: text-overflow

1481 визит
↳ 1 ответ
Ваше мнение о материале 10 из 10
Голосовало: 2

Похожие материалы

rayven
Сергей @rayven 06.11.2015 00:27:321
0
Допилил код до нужного вида
Код
<style>
.clip {
white-space: nowrap; /* Запрещаем перенос строк */
overflow: hidden; /* Обрезаем все, что не помещается в область */
max-width: 180px; /* Ширина*/
height: 50px; /* Высота/
background: #fc0; /* Цвет фона */
text-overflow: ellipsis; /* Добавляем многоточие */
}
</style>


="uForm uComForm">
avatar