Propiedades de CSS para la visualización de código y citas
Este artículo explica las propiedades de CSS relacionadas con la visualización de código y citas.
Puede aprender sobre las propiedades de CSS relacionadas con la visualización de código y las citas, como quotes y user-select, incluyendo sus casos de uso y cómo escribirlas.
YouTube Video
HTML para vista previa
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>Propiedades de CSS para la visualización de código y citas
Propiedad 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}La propiedad white-space es una propiedad CSS que especifica cómo se manejan los espacios en blanco y los saltos de línea dentro de un elemento. Por defecto, HTML trata múltiples espacios como un solo espacio, pero la propiedad white-space te permite modificar este comportamiento.
Valores principales de white-space
normales el valor predeterminado, donde múltiples espacios se colapsan en uno, y las líneas se dividen automáticamente.nowrapcolapsa los espacios en uno, pero evita los saltos de línea. El contenido se muestra en una sola línea.preconserva los espacios en blanco y los saltos de línea tal como están. No se produce el ajuste de líneas.pre-wrapconserva los espacios en blanco y los saltos de línea mientras permite el ajuste de líneas.pre-linecolapsa los espacios, pero conserva los saltos de línea y permite el ajuste de líneas.break-spacesconserva los espacios y los saltos de línea, mientras permite saltos en palabras largas o espacios en blanco.
Propiedad 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}La propiedad overflow-wrap, anteriormente conocida como word-wrap, define cómo se manejan las palabras cuando exceden el ancho del contenedor. Usando esta propiedad, puedes ajustar correctamente las palabras para evitar que el texto desborde y rompa el diseño.
En este ejemplo, con normal, las palabras largas pueden desbordar el contenedor y causar un desplazamiento horizontal, pero break-word fuerza a las palabras largas a ajustarse.
Valores de la propiedad
overflow-wrap tiene principalmente dos valores:.
-
normalnormales el valor predeterminado, donde el navegador sigue las reglas estándar de ajuste de palabras. Normalmente, las palabras se ajustan solo en puntos divisibles como espacios o guiones. Si una palabra es extremadamente larga, puede exceder el ancho del contenedor y romper el diseño. -
break-wordbreak-wordfuerza un salto de línea si es necesario, ajustando el texto a la siguiente línea independientemente de la longitud de la palabra. Esto ayuda a evitar que el diseño del contenedor se rompa debido a palabras largas.Cuando se especifica
break-word, las palabras se envuelven incluso en lugares sin espacios ni guiones para ajustarse al ancho de la pantalla. Esto es especialmente útil para URLs o palabras muy largas.
Diferencias entre overflow-wrap y otras propiedades
Las propiedades similares a overflow-wrap incluyen word-break y white-space.
Diferencia con word-break
word-break define cómo se manejan las palabras completas, mientras que overflow-wrap solo activa el ajuste cuando una palabra supera el ancho del contenedor. Por ejemplo, word-break: break-all; divide las palabras en cualquier posición, incluso si no son largas, mientras que overflow-wrap solo ajusta palabras cuando exceden el contenedor.
Diferencia con white-space
La propiedad white-space controla cómo se manejan los saltos de línea y espacios en todo el texto. A diferencia de overflow-wrap, white-space define si los saltos de línea y los espacios son preservados pero no afecta directamente al ajuste de palabras.
Por ejemplo, white-space: nowrap; asegura que todo el texto permanezca en una sola línea sin ajustes. Por otro lado, overflow-wrap controla el ajuste del texto.
Casos prácticos de uso
overflow-wrap es particularmente útil en las siguientes situaciones:.
- Mostrando URLs: Previene problemas de diseño al mostrar URLs largas.
- Términos técnicos: Maneja casos donde palabras continuas en inglés o términos técnicos exceden el ancho del contenedor.
- Diseño responsivo: Asegura que el texto largo no rompa el diseño incluso en pantallas pequeñas.
Propiedad quotes
1q {
2 quotes: "(" ")" "[" "]";
3}La propiedad quotes se utiliza para personalizar las comillas. Por lo general, las comillas se insertan automáticamente al envolver el contenido de los elementos <blockquote> o <q>, pero al usar la propiedad quotes, puedes especificar comillas personalizadas.
En este ejemplo, se utilizan paréntesis ((, )) como comillas exteriores. Además, las comillas anidadas están representadas por corchetes ([, ]).
Sintaxis
1element {
2 quotes: [opening-quote closing-quote] [, opening-quote closing-quote] ...;
3}La propiedad quotes puede especificarse con valores como los siguientes:.
none: No se mostrarán comillas.- Una serie de comillas: especifica las comillas de apertura y cierre. El primer conjunto representa las comillas exteriores, mientras que los conjuntos siguientes son para las comillas anidadas.
Puntos principales de quotes
La propiedad quotes es útil para personalizar las comillas utilizadas en las citas textuales. Al establecer comillas adecuadas según el diseño y el idioma, puedes lograr una presentación de página más sofisticada. El uso de la propiedad quotes proporciona beneficios como los siguientes:.
- Personalizar las comillas: puedes cambiar la forma predeterminada de las comillas o configurarlas según un diseño específico.
- Soporta citas anidadas: puedes aplicar diferentes conjuntos de comillas para citas anidadas.
- Personalizable por país e idioma: aplica fácilmente diferentes estilos de comillas según el idioma o el país, lo cual es útil para sitios web internacionales.
Propiedad 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}-
La propiedad
user-selectes una propiedad de CSS utilizada para controlar si los usuarios pueden seleccionar texto. Al usar esta propiedad, puedes evitar que el texto sea copiado en elementos específicos o en toda la página, o, por el contrario, permitir que sea seleccionable. Si especificaallpara la propiedaduser-select, todo el elemento se selecciona de una vez. Por ejemplo, cuando un usuario hace clic en un campo de texto o párrafo, todo el elemento se selecciona de una vez. -
También se puede usar para la selección masiva de código fuente.
-
En este ejemplo, el texto del primer párrafo se puede seleccionar, pero el texto del segundo párrafo no. En la clase
select-all, la propiedaduser-selectse establece enall, lo que permite que todo el elemento se seleccione de una vez.
Sintaxis
1element {
2 user-select: auto | none | text | all | contain;
3}La propiedad user-select se puede especificar con los siguientes valores:.
auto: Usa el comportamiento predeterminado del navegador. La selección de texto está permitida en la mayoría de los elementos, pero puede estar restringida en algunos elementos interactivos como botones y enlaces.none: La selección de texto está completamente deshabilitada. Los usuarios no podrán seleccionar texto dentro de ese elemento.text: Permite que solo se seleccione el texto dentro del elemento.all: Todo el elemento se selecciona de una vez. En lugar de una selección parcial, todo el elemento se selecciona como un todo.contain: Soportado solo por algunos navegadores. Permite que solo se seleccione el elemento en la ubicación donde se hizo clic.
Navegadores compatibles
La propiedad user-select es compatible con la mayoría de los navegadores modernos. Sin embargo, algunos navegadores pueden requerir prefijos específicos como -webkit-user-select.
- Chrome: Compatible
- Firefox: Compatible
- Safari: Compatible (requiere el prefijo
-webkit-) - Edge: Compatible
- Internet Explorer: No compatible
Casos de uso principales
La propiedad user-select ofrece las siguientes ventajas.
- Elementos de UI: Deshabilitar la selección de texto para evitar interferencias con operaciones de clic o arrastre.
- Prevenir la copia de texto: Evitar la selección y copia de texto en ciertos elementos.
- Formularios y elementos interactivos: Aplicar a elementos interactivos donde la selección de texto no es necesaria para mejorar la experiencia del usuario.
Resumen
La propiedad user-select es una propiedad CSS útil que permite un control flexible sobre la selección de texto en una página web. Puede evitar que los usuarios seleccionen accidentalmente texto innecesario o permitir que seleccionen todo de una vez, adaptándose a varias interacciones.
La propiedad 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}- La propiedad
tab-sizese utiliza para personalizar el espacio de los caracteres de tabulación. Por defecto, el ancho de la tabulación suele estar configurado en 8 espacios, pero se puede ajustar a cualquier valor utilizando la propiedadtab-size.
Sintaxis
1element {
2 tab-size: length | number;
3}La propiedad tab-size puede aceptar los siguientes tipos de valores.
number: Especifica el ancho del carácter de tabulación en términos de cantidad de caracteres. Puedes especificar un entero o un decimal.length: Especifica el ancho del carácter de tabulación utilizando unidades de longitud (por ejemplo, px, em).
Notas
-
La propiedad
tab-sizese utiliza típicamente con fuentes de ancho fijo (monospace). Cuando se usa con fuentes proporcionales, el ancho de tabulación puede volverse irregular. -
Al especificar el número de caracteres, ten en cuenta la escala en diferentes dispositivos.
Resumen
El uso de la propiedad tab-size mejora la flexibilidad al mostrar código o caracteres de tabulación. Como desarrollador, configurar correctamente el ancho de tabulación garantiza la legibilidad del código y la consistencia del diseño.
La propiedad 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}- La propiedad
text-indentse utiliza para indentar la primera línea de texto en un elemento de bloque a una distancia especificada. Esta propiedad te permite estilizar solo la primera línea de un párrafo.
Sintaxis
1element {
2 text-indent: length | percentage;
3}La propiedad text-indent puede aceptar los siguientes tipos de valores.
length: Especifica la sangría utilizando unidades de longitud (por ejemplo, px, em).percentage: Especifica la sangría como un porcentaje basado en el ancho del elemento contenedor.
Notas
text-indentse aplica solo a elementos de bloque. No tiene ningún efecto en elementos en línea.
Resumen
La propiedad text-indent es una herramienta simple pero poderosa para crear diseños de texto legibles. Dominando los conceptos básicos y entendiendo casos de uso avanzados y consideraciones, puedes diseñar de manera más efectiva.
Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.