ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

CSS Учебник

CSS СТАРТ CSS Введение CSS Синтаксис CSS Селекторы CSS Как подключить CSS Цвета CSS background-color CSS border CSS margin CSS padding CSS height/width CSS Блочная модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS display CSS max-width CSS position CSS overflow CSS float/clear CSS inline-block CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS opacity/transparency CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS Формы CSS Счётчики CSS Макет веб-сайта CSS Единицы CSS Специфичности

CSS Продвинутый

CSS Закругленные углы CSS Границы изображения CSS Фоны CSS Цвета CSS Градиенты CSS Тени CSS Эффекты текста CSS Веб-шрифты CSS 2D Трансформации CSS 3D Трансформации CSS Переходы CSS Анимации CSS Подсказки CSS Стили изображений CSS Подгонка объекта CSS Кнопки CSS Нумерация страниц CSS Несколько столбцов CSS Пользовательский интерфейс CSS Переменные CSS Размеры блоков CSS Флексбокс CSS Медиа-запросы CSS Примеры медиа-запросов

CSS Адаптивный

RWD Введение RWD Область просмотра RWD Вид сетки RWD Медиа-запросы RWD Изображения RWD Видео RWD Фреймворки RWD Шаблоны

CSS Grid (Сетка)

Grid Введение Grid Контейнер Grid Элементы

CSS Примеры

CSS Шаблоны CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

CSS Справочники

CSS Справочник CSS Селекторы CSS Функции CSS Справочник аудио CSS Безопасные веб-шрифты CSS Анимация CSS Единицы CSS PX-EM Конвертер CSS Цвета CSS Значения цвета CSS Значения по умолчанию CSS Поддержка браузерами

CSS3. Уроки для начинающих

CSS Текстовые эффекты


CSS текст. Переполнение, перенос слов, правила разрыва строк и режимы записи

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

  • text-overflow
  • word-wrap
  • word-break
  • writing-mode

CSS Text Overflow - Переполнение

CSS свойство 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 {
  overflow: visible;
}
Попробуйте сами »

CSS Перенос слов

CSS свойство word-wrap позволяет разбивать длинные слова и переносить их на следующую строку.

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

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

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

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

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

Пример

Разрешить разбивать длинные слова и переносить их на следующую строку:

p {
  word-wrap: break-word;
}
Попробуйте сами »

CSS Обрывание слов

CSS свойство word-break определяет правила разрыва строки.

Этот параграф содержит текст. Эта строка будет-обрываться-в-дефис.

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

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

Пример

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

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

CSS Writing Mode - Режим записи

CSS свойство writing-mode указывает, расположены ли строки текста горизонтально или вертикально.

Некоторый текст с элементом span из writing-mode vertical-rl.

В следующем примере показаны несколько разных режимов записи:

Пример

p.test1 {
  writing-mode: horizontal-tb;
}

span.test2 {
  writing-mode: vertical-rl;
}

p.test2 {
  writing-mode: vertical-rl;
}
Попробуйте сами »

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


CSS Свойства текстовых эффектов

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

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