До 1996 года люди привыкли оформлять веб-сайты и веб-страницы с помощью тегов таблиц. Это было настоящей головной болью для дизайнера, потому что они управляли кодом на одной странице, и из-за этого управление кодом было сложным.
После изобретения CSS дизайнерам стало легко, потому что теперь им не нужно управлять всеми вещами на одной странице, и поэтому управлять ими стало легко. Сегодня CSS очень популярен, и все используют его.
1. Режим написания в CSS
Свойство writing-mode определяет, горизонтально или вертикально будут располагаться строки текста.
Свойство writing-mode поддерживает следующие параметры:
-
sideways-rl: Текст и другое содержимое располагается вертикально сверху вниз и устанавливается боком вправо.
-
sideways-lr: Как и sideways-rl, текст и другое содержимое располагается вертикально сверху вниз, но устанавливается сбоку слева.
-
vertical-rl: Текст и другое содержимое располагаются вертикально сверху вниз и справа налево по горизонтали. Если имеется две или более строк, то строки располагаются слева от предыдущей строки.
-
vertical-lr: В отличие от vertical-rl, по горизонтали текст располагается слева направо, а если есть две или более строк, то строки располагаются справа от предыдущей строки.
2. background-clip в CSS
Это свойство позволяет установить пользовательскую графику в качестве фона элемента. Пользовательская графика может получить расширения в border-box, padding-box или content-box элемента.
ВЫХОД
3. Выбор пользователя в CSS
Если вы не хотите, чтобы пользователь выбирал ваш текст на сайте, вы используете это свойство. Это свойство позволяет отключить выделение определенного текста на вашей веб-странице.
css
.text-to-select {
user-select: all;
}
4. white-space в CSS
свойство white-space позволяет управлять обтеканием текста элемента. Оно имеет значения nowrap, pre, pre-wrap, pre-line и normal. Посмотрите на пример
<style type="text/css">
div{
width:100px;
}
p{
background:red;
font-size:2rem;
}
.nowrap{
white-space:nowrap;
}
.pre{
white-space:pre;
}
.pre-line{
white-space:pre-line;
}
.nowrap1{
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
}
</style>
<div>
<p>
First line of code
</p>
<p class='nowrap'>
nowrap text
</p>
<p class='pre'>
Pre text
</p>
<p class='pre-line'>
Pre-line text
</p>
<p class='nowrap1'>
Nowrap with overflow.
</p>
</div>