Последние учебники веб-разработки
×

CSS Руководство

CSS ГЛАВНАЯ CSS Введение CSS Синтаксис CSS Как CSS Цвета CSS Фон CSS Границы CSS Маржа CSS набивка CSS Высота ширина CSS Текст CSS шрифты CSS связи CSS Списки CSS таблицы CSS Модель Бокса CSS Outline CSS Дисплей CSS Максимальная ширина CSS Позиция CSS терка CSS Inline-block CSS выравнивать CSS Комбинаторы CSS Псевдо-класс CSS Псевдо-элемент CSS Панель навигации CSS Dropdowns CSS Всплывающие CSS Галерея CSS изображение Непрозрачность CSS спрайтов CSS Attr селекторы CSS Формы CSS Счетчики

CSS3

CSS3 Введение CSS3 Закругленные углы CSS3 Пограничные изображения CSS3 Фон CSS3 Цвета CSS3 Градиенты CSS3 Тени CSS3 Текст CSS3 шрифты CSS3 2D Трансформации CSS3 3D Трансформации CSS3 Переходы CSS3 Анимации CSS3 Изображений CSS3 Кнопки CSS3 пагинация CSS3 Несколько столбцов CSS3 Пользовательский интерфейс CSS3 Box Определение размеров CSS3 Flexbox CSS3 Медиа-запросы CSS3 Примеры MQ

CSS Адаптивный веб-дизайн

Адаптивный веб-дизайн вступление Адаптивный веб-дизайн Viewport Адаптивный веб-дизайн Вид сетки Адаптивный веб-дизайн Медиа-запросы Адаптивный веб-дизайн Изображений Адаптивный веб-дизайн Видео Адаптивный веб-дизайн Каркасы

CSS Examples

CSS Примеры CSS викторина CSS сертификат

CSS References

CSS Справка CSS Селекторы CSS функции CSS Ссылка Aural CSS Web Safe шрифты CSS Animatable CSS Единицы CSS PX-EM конвертер CSS Цвета CSS Значения цвета CSS Цвет Названия CSS3 Поддержка браузеров

 

CSS Текст


CSS3 Text

CSS3 содержит несколько новых текстовых функций.

В этой главе вы узнаете о следующих свойствах текста:

  • text-overflow
  • word-wrap
  • word-break

Поддержка браузеров

Числа в таблице указать первую версию браузера, которая полностью поддерживает свойство.

Числа с последующим -О- указать первую версию, которая работала с приставкой.

Имущество
text-overflow 4.0 6.0 7.0 3.1 11.0
9.0 -o-
word-wrap 23.0 5.5 3.5 6.1 12.1
word-break 4.0 5.5 15.0 3.1 15.0

Переполнение текста CSS3

CSS3 text-overflow свойство определяет , как переполненный содержание , которое не отображается должны быть обозначены знаками пользователю.

Он может быть обрезан:

Это какой-то длинный текст, который не помещается в поле

или оно может быть вынесено как многоточие (...):

Это какой-то длинный текст, который не помещается в поле

Код CSS выглядит следующим образом:

пример

p.test1 {
    white-space: nowrap;
    width: 200px;
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: clip;
}

p.test2 {
    white-space: nowrap;
    width: 200px;
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: ellipsis;
}
Попробуй сам "

В следующем примере показано, как можно отобразить переполненном содержимое при наведении курсора мыши на элемент:

пример

div.test:hover {
    text-overflow: inherit;
    overflow: visible;
}
Попробуй сам "

CSS3 Слово Обертывание

CSS3 word-wrap свойство позволяет длинные слова , чтобы иметь возможность быть разорван и обернуть на следующую строку.

Если слово слишком длинное и не помещается в пределах области, она расширяется за пределы:

Этот пункт содержит очень длинное слово: thisisaveryveryveryveryveryverylongword . Длинное слово будет ломаться и завернуть на следующую строку.

Свойство перенос слов позволяет принудительно текст обернуть - даже если это означает расщепление его в середине слова:

Этот пункт содержит очень длинное слово: thisisaveryveryveryveryveryverylongword . Длинное слово будет ломаться и завернуть на следующую строку.

Код CSS выглядит следующим образом:

пример

Разрешить длинные слова, чтобы иметь возможность быть разорван и обернуть на следующую строку:

p {
    word-wrap: break-word;
}
Попробуй сам "

CSS3 Слово Ломать

CSS3 word-break свойство определяет строки нарушение правил.

Этот параграф содержит некоторый текст. Эта линия-брейк-на-дефис.

Этот параграф содержит некоторый текст. Линии будут разорваться в любой символ.

Код CSS выглядит следующим образом:

пример

p.test1 {
    word-break: keep-all;
}

p.test2 {
    word-break: break-all;
}
Попробуй сам "

Проверьте себя с упражнениями!

Упражнение 1 » Упражнение 2» Упражнение 3 »


Свойства текста CSS3

В следующей таблице перечислены новые CSS3 свойства текста:

Имущество Описание
text-align-last Определяет способ выравнивания последней строки текста
text-emphasis Сокращение для настройки текста упор стиль текста и упор-цвет в одной декларации
text-justify Определяет, насколько оправданными текст должен быть выровнен и разнесены
text-overflow Определяет, как переполнения содержимое, которое не отображается должно быть сигналом для пользователя
word-break Определяет строки, нарушающие правила, не CJK скриптов
word-wrap Позволяет длинные слова, чтобы иметь возможность быть сломана и обернуть на следующую строку