Articles
Введение в CSS
CSS свойства для отображения кода и цитат

CSS свойства для отображения кода и цитат

Эта статья объясняет CSS свойства, связанные с отображением кода и цитат.

Вы можете узнать о свойствах CSS, связанных с отображением кода и цитатами, таких как quotes и user-select, включая их случаи использования и способы написания.

YouTube Video

HTML для предварительного просмотра

css-code-quotation.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-code-quotation.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Code Display And Quotations</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Code Display And Quotations Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>white-space</h3>
 23            <section>
 24                <header><h4>white-space: normal</h4></header>
 25                <section class="sample-view">
 26                    <p class="white-space-normal">This is   an example     with    multiple spaces.   The spaces will be collapsed.</p>
 27                </section>
 28                <header><h4>white-space: nowrap</h4></header>
 29                <section class="sample-view">
 30                    <p class="white-space-nowrap">This is an example with no line breaks. The text will not wrap.</p>
 31                </section>
 32                <header><h4>white-space: pre</h4></header>
 33                <section class="sample-view">
 34<p class="white-space-pre">This    is     an
 35    example     with multiple
 36    spaces    and
 37    line breaks.</p>
 38                </section>
 39                <header><h4>white-space: pre-wrap</h4></header>
 40                <section class="sample-view">
 41<p class="white-space-pre-wrap">This    is     an
 42    example     with multiple
 43    spaces    and
 44    line breaks. The text will wrap when it reaches the edge.</p>
 45                </section>
 46            </section>
 47        </article>
 48        <article>
 49            <h3>overflow-wrap</h3>
 50            <section>
 51                <header><h4>overflow-wrap: normal</h4></header>
 52                <section class="sample-view">
 53                    <section class="overflow-wrap-example">
 54                        <p class="overflow-wrap-normal">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 55                    </section>
 56                </section>
 57                <header><h4>overflow-wrap: break-word</h4></header>
 58                <section class="sample-view">
 59                    <section class="overflow-wrap-example">
 60                        <p class="overflow-wrap-break-word">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 61                    </section>
 62                </section>
 63            </section>
 64        </article>
 65        <article>
 66            <h3>quotes</h3>
 67            <section>
 68                <header><h4>quotes: "(" ")"</h4></header>
 69                <section class="sample-view">
 70                    <p>Here's an example of a quote: <q>CSS makes the web beautiful.</q></p>
 71                </section>
 72                <header><h4>quotes: "(" ")" "[" "]"</h4></header>
 73                <section class="sample-view">
 74                    <p>Here's a nested quote: <q>He said, <q>CSS is powerful.</q></q></p>
 75                </section>
 76            </section>
 77        </article>
 78        <article>
 79            <h3>user-select</h3>
 80            <section>
 81                <header><h4>user-select: auto</h4></header>
 82                <section class="sample-view">
 83                    <p class="select-auto">This text is selectable.</p>
 84                </section>
 85                <header><h4>user-select: none</h4></header>
 86                <section class="sample-view">
 87                    <p class="select-none">This text cannot be selected.</p>
 88                </section>
 89                <header><h4>user-select: all</h4></header>
 90                <section class="sample-view">
 91                    <p class="select-all">All text will be selected at once.</p>
 92                </section>
 93            </section>
 94        </article>
 95        <article>
 96            <h3>tab-size</h3>
 97            <section>
 98                <header><h4>tab-size: initial</h4></header>
 99                <section class="sample-view">
100<pre>
101function example() {
102	console.log("Initial Tab size is 8");
103}
104</pre>
105            </section>
106            <section>
107                <header><h4>tab-size: 2</h4></header>
108                <section class="sample-view">
109<pre class="tab-size-2">
110function example() {
111	console.log("Tab size is set to 2");
112}
113</pre>
114            </section>
115            <header><h4>tab-size: 4</h4></header>
116            <section class="sample-view">
117<pre class="tab-size-4">
118function example() {
119	console.log("Tab size is set to 4");
120}
121</pre>
122            </section>
123            <header><h4>tab-size: 20px</h4></header>
124            <section class="sample-view">
125<pre class="tab-size-20px">
126function example() {
127	console.log("Tab size is set to 20px");
128}
129</pre>
130                </section>
131            </section>
132        </article>
133        <article>
134            <h3>text-indent</h3>
135            <section>
136                <header><h4>text-indent: 0</h4></header>
137                <section class="sample-view">
138                    <p class="text-indent-0">This text has no indentation. The first line starts flush with the left margin.</p>
139                </section>
140                <header><h4>text-indent: 20px</h4></header>
141                <section class="sample-view">
142                    <p class="text-indent-20px">This paragraph has a 20px indentation on the first line.</p>
143                </section>
144                <header><h4>text-indent: -10px</h4></header>
145                <section class="sample-view">
146                    <p class="text-indent--10px">This paragraph has a negative indentation, pulling the first line to the left.</p>
147                </section>
148                <header><h4>text-indent: 10%</h4></header>
149                <section class="sample-view">
150                    <p class="text-indent-10percent">This paragraph has a first-line indentation of 10% of the containing block's width.</p>
151                </section>
152                <header><h4>text-indent: -20px; margin-left:40px;</h4></header>
153                <section class="sample-view">
154                    <p class="text-indent-with-margin">This is an example paragraph using a hanging indent. The second and subsequent lines are indented, while the first line is outdented.</p>
155                </section>
156            </section>
157        </article>
158
159    </main>
160</body>
161</html>

CSS свойства для отображения кода и цитат

Свойство white-space 

 1.white-space-normal {
 2    white-space: normal;
 3    border: 1px solid black;
 4    padding: 10px;
 5    width: 300px;
 6}
 7
 8.white-space-nowrap {
 9    white-space: nowrap;
10    border: 1px solid black;
11    padding: 10px;
12    width: 300px;
13}
14
15.white-space-pre {
16    white-space: pre;
17    border: 1px solid black;
18    padding: 10px;
19    width: 300px;
20}
21
22.white-space-pre-wrap {
23    white-space: pre-wrap;
24    border: 1px solid black;
25    padding: 10px;
26    width: 300px;
27}

Свойство white-space в CSS определяет, как пробелы и разрывы строк обрабатываются внутри элемента. По умолчанию HTML обрабатывает несколько пробелов как один, но свойство white-space позволяет изменить это поведение.

Основные значения свойства white-space

  • normal — это значение по умолчанию, при котором несколько пробелов сжимаются в один, а строки автоматически переносятся.
  • nowrap сжимает пробелы в один, но предотвращает разрывы строк. Контент отображается в одну строку.
  • pre сохраняет пробелы и разрывы строк такими, какие они есть. Перенос строк не происходит.
  • pre-wrap сохраняет пробелы и разрывы строк, позволяя перенос строк.
  • pre-line сжимает пробелы, но сохраняет разрывы строк и позволяет перенос строк.
  • break-spaces сохраняет пробелы и разрывы строк, позволяя перенос длинных слов или пробелов.

Свойство overflow-wrap 

 1.overflow-wrap-example {
 2  width: 200px;
 3  border: 1px solid #000;
 4}
 5
 6.overflow-wrap-normal {
 7  overflow-wrap: normal;
 8}
 9
10.overflow-wrap-break-word {
11  overflow-wrap: break-word;
12}

Свойство overflow-wrap, ранее известное как word-wrap, определяет, как слова обрабатываются, когда они выходят за пределы ширины контейнера. Используя это свойство, вы можете правильно переносить слова, чтобы предотвратить переполнение текста и нарушение компоновки.

В этом примере при значении normal длинные слова могут выходить за пределы контейнера и вызывать горизонтальную прокрутку, но break-word заставляет длинные слова переноситься.

Значения свойства

overflow-wrap имеет два основных значения:.

  • normal

    normal — это значение по умолчанию, при котором браузер следует стандартным правилам переноса слов. Обычно слова переносятся только в допустимых точках разрыва, таких как пробелы или дефисы. Если слово чрезвычайно длинное, оно может выйти за пределы ширины контейнера и нарушить компоновку.

  • break-word break-word при необходимости вызывает разрыв строки, перенося текст на следующую строку независимо от длины слова. Это помогает предотвратить нарушение макета контейнера из-за длинных слов.

    Когда указано break-word, слова переносаются даже в местах без пробелов или дефисов, чтобы вписаться в ширину экрана. Это особенно полезно для URL-адресов или очень длинных слов.

Различия между overflow-wrap и другими свойствами

Свойства, похожие на overflow-wrap, включают word-break и white-space.

Различие с word-break

word-break определяет, как обрабатываются целые слова, в то время как overflow-wrap вызывает перенос только при превышении слова ширины контейнера. Например, word-break: break-all; разрывает слова в любой позиции, даже если они не длинные, тогда как overflow-wrap переносит слова только в случае превышения ширины контейнера.

Различие с white-space

Свойство white-space управляет тем, как разрывы строк и пробелы обрабатываются во всем тексте. В отличие от overflow-wrap, свойство white-space определяет, сохраняются ли разрывы строк и пробелы, но напрямую не влияет на перенос слов.

Например, white-space: nowrap; гарантирует, что весь текст останется в одной строке без переноса. С другой стороны, overflow-wrap управляет переносом текста.

Практические случаи использования

overflow-wrap особенно полезен в следующих ситуациях:.

  1. Отображение URL-адресов: предотвращает проблемы с макетом при отображении длинных URL.
  2. Технические термины: обрабатывает случаи, когда непрерывные английские слова или технические термины превышают ширину контейнера.
  3. Адаптивный дизайн: гарантирует, что длинный текст не нарушит макет даже на маленьких экранах.

Свойство quotes 

1q {
2    quotes: "(" ")" "[" "]";
3}

Свойство quotes используется для настройки кавычек. Обычно кавычки автоматически вставляются при использовании элементов <blockquote> или <q>, но с помощью свойства quotes вы можете указать собственные кавычки.

В этом примере круглые скобки ((, )) используются в качестве внешних кавычек. Кроме того, вложенные кавычки обозначаются квадратными скобками ([, ]).

Синтаксис 

1element {
2    quotes: [opening-quote closing-quote] [, opening-quote closing-quote] ...;
3}

Свойству quotes можно задавать значения, например, следующие:.

  • none: Кавычки отображаться не будут.
  • Ряд кавычек: Укажите открывающие и закрывающие кавычки. Первый набор обозначает внешние кавычки, в то время как последующие наборы используются для вложенных цитат.

Основные моменты свойства quotes

Свойство quotes — это полезное свойство для настройки кавычек, используемых в текстовых цитатах. Установив соответствующие кавычки в зависимости от дизайна и языка, вы можете добиться более изысканного представления страницы. Использование свойства quotes дает следующие преимущества:.

  • Настройка кавычек: Вы можете изменить формат кавычек по умолчанию или установить кавычки, соответствующие определенному дизайну.
  • Поддержка вложенных цитат: Вы можете использовать разные наборы кавычек для вложенных цитат.
  • Настройка для страны и языка: Легко применяйте различные стили кавычек в зависимости от языка или страны, что полезно для международных веб-сайтов.

Свойство user-select 

 1.select-auto {
 2    user-select: auto;
 3}
 4
 5.select-none {
 6    user-select: none;
 7}
 8
 9.select-all {
10    user-select: all;
11}

  • Свойство user-select — это CSS-свойство, используемое для управления тем, могут ли пользователи выделять текст. Используя это свойство, вы можете предотвратить копирование текста в определенных элементах или на всей странице, либо, наоборот, сделать текст выделяемым. Если для свойства user-select указать значение all, весь элемент будет выделен сразу. Например, когда пользователь нажимает на текстовое поле или абзац, весь элемент выделяется сразу.

  • Это также можно использовать для массового выделения исходного кода.

  • В этом примере текст первого абзаца можно выделить, а текст второго абзаца - нет. В классе select-all свойство user-select устанавливается в значение all, что позволяет выделить весь элемент сразу.

Синтаксис 

1element {
2    user-select: auto | none | text | all | contain;
3}

Свойство user-select может иметь следующие значения:.

  • auto: Использовать поведение браузера по умолчанию. Выделение текста разрешено для большинства элементов, но может быть ограничено на некоторых интерактивных элементах, таких как кнопки и ссылки.
  • none: Выделение текста полностью отключено. Пользователи не смогут выделить текст внутри этого элемента.
  • text: Разрешает выделение только текста внутри элемента.
  • all: Весь элемент выделяется сразу. Вместо частичного выделения весь элемент выделяется целиком.
  • contain: Поддерживается только некоторыми браузерами. Разрешает выделять только элемент в месте, где был совершен клик.

Поддерживаемые браузеры

Свойство user-select поддерживается большинством современных браузеров. Однако, для некоторых браузеров могут потребоваться префиксы, такие как -webkit-user-select.

  • Chrome: Поддерживается
  • Firefox: Поддерживается
  • Safari: Поддерживается (требуется префикс -webkit-).
  • Edge: Поддерживается
  • Internet Explorer: Не поддерживается

Основные случаи использования

Свойство user-select предоставляет следующие преимущества:.

  • Элементы интерфейса: Отключите выделение текста, чтобы избежать помех при клике или перетаскивании.
  • Запрет копирования текста: Запретите выделение и копирование текста на определенных элементах.
  • Формы и интерактивные элементы: Применяйте к интерактивным элементам, где выделение текста не требуется, чтобы улучшить пользовательский опыт.

Резюме

user-select — это полезное CSS-свойство, которое позволяет гибко управлять выделением текста на веб-странице. Это позволяет предотвратить случайное выделение ненужного текста или дать возможность выделить все сразу, учитывая различные взаимодействия.

Свойство tab-size 

 1.tab-size-2 {
 2    tab-size: 2;
 3}
 4
 5.tab-size-4 {
 6    tab-size: 4;
 7}
 8
 9.tab-size-20px {
10    tab-size: 20px;
11}
  • Свойство tab-size используется для настройки пространства для символов табуляции. По умолчанию ширина табуляции обычно равна 8 пробелам, но это значение можно изменить с помощью свойства tab-size.

Синтаксис 

1element {
2    tab-size: length | number;
3}

Свойство tab-size может принимать следующие типы значений.

  • number: Указывает ширину символа табуляции в количестве символов. Вы можете указать как целое число, так и дробное значение.
  • length: Определяет ширину символа табуляции с использованием единиц длины (например, px, em).

Примечания

  • Свойство tab-size обычно используется с моноширинными шрифтами. При использовании с пропорциональными шрифтами ширина табуляции может быть неровной.

  • Указывая количество символов, учитывайте масштабирование на различных устройствах.

Резюме

Использование свойства tab-size увеличивает гибкость при отображении кода или символов табуляции. Как разработчик, правильная настройка ширины табуляции обеспечивает читаемость кода и согласованность дизайна.

Свойство text-indent 

 1p.text-indent-0 {
 2    text-indent: 0;
 3}
 4
 5p.text-indent-20px {
 6    text-indent: 20px;
 7}
 8
 9p.text-indent--10px {
10    text-indent: -10px;
11}
12
13p.text-indent-10percent {
14    text-indent: 10%;
15}
16
17p.text-indent-with-margin {
18    text-indent: -20px;
19    margin-left: 20px;
20}
  • Свойство text-indent используется для создания отступа первой строки текста в блочном элементе на указанное расстояние. Это свойство позволяет стилизовать только первую строку абзаца.

Синтаксис 

1element {
2    text-indent: length | percentage;
3}

Свойство text-indent может принимать следующие типы значений.

  • length: Определяет отступ с использованием единиц длины (например, px, em).
  • percentage: Указывает отступ в процентах от ширины контейнера.

Примечания

  • text-indent применяется только к блочным элементам. Он не оказывает влияния на строчные элементы.

Резюме

Свойство text-indent — это простой, но мощный инструмент для создания удобочитаемых текстовых дизайнов. Освоив основы и поняв продвинутые случаи использования и аспекты, вы сможете стилизовать более эффективно.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video

Свойства CSS, связанные с интервалом текстаCSS-свойства, связанные с моделью коробки