Менее известное свойство CSS

До 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>