Меню
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP КАК СДЕЛАТЬ ПРОГРАММЫ SW3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS КИБЕРБЕЗОПАСНОСТЬ НАУКА О ДАННЫХ
     ❯   

CSS Учебник


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


CSS Отзывчивый


CSS Grid


CSS SASS


CSS Примеры


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



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



CSS3 Текст: Переполнение, перенос слов и разбиение слов и режимы записи

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

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

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

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

Его можно обрезать:

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

или его можно представить как многоточие (...):

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

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

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 Перенос слов

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

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

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

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

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

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

Позвольте длинным словам быть разбитыми и переноситься на следующую строку:

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

CSS3 Разбиение слов

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

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

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

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

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

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

CSS3 Режим записи

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

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

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

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

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

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

CSS3 Упражнения

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

Укажите, что переполненное содержимое для элемента <p> должно быть обозначено многоточием (...).

<style>
p {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  : ;
}
</style>

<body>
  <p>
    Этот параграф содержит очень длинное слово: сверхкалибристический, замечательный.
  </p>
</body>


CSS3 Свойства текстового эффекта

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

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


×

Связаться с отделом продаж

Если вы хотите использовать услуги schoolsw3 как образовательное учреждение, команда или предприятие, отправьте нам электронное письмо:
sales@schoolsw3.com

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, отправьте нам электронное письмо:
help@schoolsw3.com

Schoolsw3 оптимизирован для обучения и подготовки. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно проверяются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего контента.
При использовании Schoolsw3 вы соглашаетесь прочитать и принять наши условия использования,
политику использования файлов cookie и конфиденциальности.

Авторское право 1999- принадлежит Refsnes Data. Все права защищены. Schoolsw3 работает на SW3.CSS.