CSS Properties for Code Display and Quotations
This article explains CSS properties related to code display and quotations.
You can learn about CSS properties related to code display and quotations, such as quotes and user-select, including their use cases and how to write them.
YouTube Video
HTML for Preview
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 Properties for Code Display and Quotations
white-space Property
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}The white-space property is a CSS property that specifies how whitespace and line breaks are handled within an element. By default, HTML treats multiple spaces as a single space, but the white-space property allows you to modify this behavior.
Main values of white-space
normalis the default value, where multiple spaces are collapsed into one, and lines break automatically.nowrapcollapses spaces into one but prevents line breaks. The content is displayed in a single line.prepreserves whitespace and line breaks as they are. Line wrapping does not occur.pre-wrappreserves whitespace and line breaks while allowing line wrapping.pre-linecollapses spaces but preserves line breaks, and allows line wrapping.break-spacespreserves spaces and line breaks, while allowing breaks at long words or whitespace.
overflow-wrap Property
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}The overflow-wrap property, formerly known as word-wrap, defines how words are handled when they exceed the container's width. Using this property, you can properly wrap words to prevent text from overflowing and breaking the layout.
In this example, with normal, long words may overflow the container and cause horizontal scrolling, but break-word forces long words to wrap.
Property values
overflow-wrap primarily has two values:.
-
normalnormalis the default value, where the browser follows standard word-wrapping rules. Normally, words wrap only at breakable points such as spaces or hyphens. If a word is extremely long, it may exceed the container's width and break the layout. -
break-wordbreak-wordforces a line break if necessary, wrapping text to the next line regardless of word length. This helps prevent the container layout from breaking due to long words.When
break-wordis specified, words wrap even in places without spaces or hyphens to fit within the screen width. This is especially useful for URLs or very long words.
Differences Between overflow-wrap and Other Properties
Properties similar to overflow-wrap include word-break and white-space.
Difference from word-break
word-break defines how entire words are handled, while overflow-wrap only triggers wrapping when a word exceeds the container width. For example, word-break: break-all; breaks words at any position, even if they are not long, whereas overflow-wrap only wraps words when they exceed the container.
Difference from white-space
The white-space property controls how line breaks and spaces are handled in the entire text. Unlike overflow-wrap, white-space defines whether line breaks and spaces are preserved but does not directly affect word wrapping.
For example, white-space: nowrap; ensures that the entire text remains on a single line without wrapping. On the other hand, overflow-wrap controls text wrapping.
Practical Use Cases
overflow-wrap is particularly useful in the following situations:.
- Displaying URLs: Prevents layout issues when displaying long URLs.
- Technical Terms: Handles cases where continuous English words or technical terms exceed the container width.
- Responsive Design: Ensures that long text does not break the layout even on small screens.
quotes property
1q {
2 quotes: "(" ")" "[" "]";
3}The quotes property is used to customize quotation marks. Usually, quotation marks are automatically inserted when wrapping the content of <blockquote> or <q> elements, but using the quotes property allows you to specify custom quotation marks.
In this example, parentheses ((, )) are used as outer quotation marks. Additionally, nested quotation marks are represented by square brackets ([, ]).
Syntax
1element {
2 quotes: [opening-quote closing-quote] [, opening-quote closing-quote] ...;
3}The quotes property can be specified with values like the following:.
none: No quotation marks will be displayed.- A series of quotes: Specify the opening and closing quotation marks. The first set represents the outer quotation marks, while the subsequent sets are for nested quotations.
Main points of quotes
The quotes property is a useful property for customizing quotation marks used in text quotations. By setting appropriate quotation marks according to the design and language, you can achieve a more sophisticated page presentation. Using the quotes property provides benefits such as the following:.
- Customize quotation marks: You can change the default shape of quotation marks or set quotation marks tailored to a specific design.
- Supports nested quotations: You can apply different sets of quotation marks for nested quotations.
- Customizable by country and language: Easily apply different styles of quotation marks depending on the language or country, which is useful for international websites.
user-select property
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}-
The
user-selectproperty is a CSS property used to control whether users can select text. By using this property, you can prevent text from being copied in specific elements or across the entire page, or conversely make it selectable. If you specifyallfor theuser-selectproperty, the entire element is selected at once. For example, when a user clicks on a text field or paragraph, the entire element is selected at once. -
It can also be used for bulk selection of source code.
-
In this example, the text of the first paragraph is selectable, but the text of the second paragraph is not. In the
select-allclass, theuser-selectproperty is set toall, allowing the entire element to be selected at once.
Syntax
1element {
2 user-select: auto | none | text | all | contain;
3}The user-select property can be specified with the following values:.
auto: Use the browser's default behavior. Text selection is allowed on most elements, but may be restricted on some interactive elements like buttons and links.none: Text selection is completely disabled. Users will not be able to select text within that element.text: Allows only the text within the element to be selected.all: The entire element is selected at once. Instead of partial selection, the entire element is selected as a whole.contain: Supported only by some browsers. Allows only the element at the clicked location to be selected.
Supported Browsers
The user-select property is supported by most modern browsers. However, some browsers may require vendor prefixes such as -webkit-user-select.
- Chrome: Supported
- Firefox: Supported
- Safari: Supported (requires
-webkit-prefix) - Edge: Supported
- Internet Explorer: Not Supported
Main Use Cases
The user-select property offers the following advantages.
- UI elements: Disable text selection to avoid interfering with click or drag operations.
- Prevent text copying: Prevent text selection and copying on certain elements.
- Forms and interactive elements: Apply to interactive elements where text selection is unnecessary to enhance the user experience.
Summary
The user-select property is a useful CSS property that allows flexible control over text selection on a webpage. It can prevent users from accidentally selecting unnecessary text or allow them to select everything at once, accommodating various interactions.
The tab-size property
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}- The
tab-sizeproperty is used to customize the space for tab characters. By default, the tab width is usually set to 8 spaces, but it can be adjusted to any value using thetab-sizeproperty.
Syntax
1element {
2 tab-size: length | number;
3}The tab-size property can accept the following types of values.
number: Specifies the width of the tab character in terms of character count. You can specify either an integer or a decimal.length: Specifies the width of the tab character using length units (e.g., px, em).
Notes
-
The
tab-sizeproperty is typically used with monospace fonts. When used with proportional fonts, the tab width may become uneven. -
When specifying the number of characters, be mindful of scaling on different devices.
Summary
Using the tab-size property enhances flexibility when displaying code or tab characters. As a developer, properly setting the tab width ensures code readability and design consistency.
The text-indent property
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}- The
text-indentproperty is used to indent the first line of text in a block element by a specified distance. This property allows you to style only the first line of a paragraph.
Syntax
1element {
2 text-indent: length | percentage;
3}The text-indent property can accept the following types of values.
length: Specifies the indentation using length units (e.g., px, em).percentage: Specifies the indentation as a percentage based on the width of the container element.
Notes
text-indentapplies only to block elements. It has no effect on inline elements.
Summary
The text-indent property is a simple yet powerful tool for creating readable text designs. By mastering the basics and understanding advanced use cases and considerations, you can style more effectively.
You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.