• Страница 1 из 1
  • 1
text-overflow
avatar
Админ | Оффлайн
Описание
Определяет параметры видимости текста в блоке, если текст целиком не помещается в заданную область. Возможны два варианта: текст обрезается; текст обрезается и к концу строки добавляется многоточие. 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>

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


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




[Сообщение # 2]  
  • Страница 1 из 1
  • 1
Поиск:

close