word break
Псевдокласс соответствует корневому элементу дерева документа ( <html> )
однако его приоритет ( specificity ) выше, чем у селектора html
Это означает, что в случае конфликта значений CSS-атрибутов "победит" то, что объявлено в :root
:root {
background-color: yellow;
}
html {
background-color: green;
}Цвет подложки будет желтый
Глобальные CSS-переменные можно объявить в :root:
:root {
--dark-fone: black;
--light-fone: white;
--dark-text: #ccc;
--light-text: #333;
}Теперь их можно использовать в атрибутах стиля:
.dark {
background-color: var(--dark-fone);
color: var(--dark-text);
}
.light {
background-color: var(--light-fone);
color: var(--light-text);
}
pre {
padding: 10px 20px;
}Можно помотреть результат на странице:
<pre class="light">Have a nice day!</pre>
<pre class="dark">Good night!</pre>:root {
--legend: #008;
--normal: white;
--break-all: #9f9;
--keep-all: #ff9;
--break-word: #9ff;
}
fieldset {
padding: 20px;
border: 1px inset;
max-width: 98%;
margin: 30px 20px 20px 20px;
box-sizing: border-box;
}
legend {
font-family: Arial;
font-weight: bold;
color: var(--legend);
padding: 4px 8px 30px 8px;
}
.normal {
word-break: normal;
background-color: var(--normal);
}
.breakAll {
word-break: break-all;
background-color: var(--break-all);
}
.keepAll {
word-break: keep-all;
background-color: var(--keep-all);
}
.breakWord {
word-break: break-word;
background-color: var(--break-word);
}<fieldset class="normal">
<legend>1. word-break: normal</legend>Это очень длинное слово:
***************************************************************************************************************************************************************************************************
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</fieldset>
<fieldset class="breakAll">
<legend>2. word-break: break-all</legend>Это очень длинное слово:
***************************************************************************************************************************************************************************************************
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</fieldset>
<fieldset class="keepAll">
<legend>3. word-break: keep-all</legend>Это очень длинное слово:
***************************************************************************************************************************************************************************************************
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</fieldset>
<fieldset class="breakWord">
<legend>4. word-break: break-word</legend>Это очень длинное слово:
***************************************************************************************************************************************************************************************************
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</fieldset>
Всемирная паутина
Пример
Flexbox Froggy
