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

CSS перелив текста, полная замена строки, правила разрыва строки и стиль написания

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

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