Эффекты текста CSS

CSS перелив текста,word-wrap, правила перевода строк и стиль письма

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

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

CSS перелив текста

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 Разрыв текста (Word Wrapping)

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

Если слово слишком длинное, чтобы поместиться в区域内, оно будет расширяться наружу:

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

С помощью атрибута word-wrap можно强制 перенести текст на следующую строку - даже если это означает разрыв слова посередине:

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

Следующий код CSS:

Пример

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

p {
  word-wrap: break-word;
{

Попробуйте сами

Правила разрыва строк CSS

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

Этот абзац содержит некоторый текст. Эта строка будет разрываться на границах дефисов:

Этот абзац содержит некоторый текст. Эта строка будет разрываться на границах дефисов.

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

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

Следующий код CSS:

Пример

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

Попробуйте сами

Режимы написания CSS

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

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

Ниже приведены примеры различных режимов написания:

Пример

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 Указание, горизонтально или вертикально расположены ли строки текста.