El texto de Spectre es una de las características más útiles de Spectre que debe usarse en el texto para la decoración y el estilo. Podemos usar estas utilidades para la alineación de texto, estilos y cosas de desbordamiento.
Clase de texto de espectro:
- text-left: Esta clase se usa para hacer texto alineado a la izquierda.
- text-center: Esta clase se usa para hacer texto alineado al centro.
- text-right: Esta clase se usa para hacer texto alineado a la derecha.
- text-justify: Esta clase se usa para hacer texto justificado.
- text-lowercase: Esta clase se utiliza para poner el texto en minúsculas.
- text-uppercase: Esta clase se utiliza para poner el texto en mayúsculas.
- text-capitalize: Esta clase se usa para poner el texto en mayúscula
- text-normal: esta clase se utiliza para convertir el texto anormal en un texto normal.
- text-bold: esta clase pone el texto en negrita.
- text-italic: Esta clase pone el texto en cursiva.
- text-muted: esta clase silencia el texto.
- text-large: Esta clase hace que el texto sea grande.
- text-small: Esta clase hace que el texto sea pequeño.
- text-tiny: esta clase hace que el texto sea diminuto.
- text-ellipsis: Esta clase hace que el texto se elipsis.
- clip de texto: esta clase se utiliza para truncar el texto.
- text-break: esta clase se usa para romper en puntos arbitrarios
Sintaxis:
<div class="text-left"> .... </div>
Ejemplo 1: El siguiente ejemplo ilustra la carga de texto.
HTML
<!DOCTYPE html>
<html>
<head>
<title>SPECTRE Text Class</title>
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
<style>
div
{
height:100px;
width:100px;
}
</style>
</head>
<body>
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<strong>SPECTRE Text Class</strong>
<br>
</center>
<strong>Text-left:</strong>
<p class="text-left">Geeksforgeeks</p>
<strong>Text-center:</strong>
<p class="text-center">Geeksforgeeks</p>
<strong>Text-right:</strong>
<p class="text-right">Geeksforgeeks</p>
<strong>Text-justify:</strong>
<p class="text-justify">A Computer Science Portal</p>
<strong>Text-lowercase:</strong>
<p class="text-lowercase">Geeksforgeeks</p>
<strong>Text-uppercase:</strong>
<p class="text-uppercase">Geeksforgeeks</p>
<strong>Text-capitalize:</strong>
<p class="text-capitalize">geeksforgeeks</p>
</body>
</html>
Producción:
Texto de espectro
Ejemplo 2: El siguiente código demuestra las otras clases de texto.
HTML
<!DOCTYPE html>
<html>
<head>
<title>SPECTRE Text Class</title>
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
<style>
div {
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<strong>SPECTRE Text Class</strong>
<br>
<strong>Normal Text:</strong>
<p class="text-normal">Geeksforgeeks</p>
<strong>Bold Text:</strong>
<p class="text-bold">Geeksforgeeks</p>
<strong>Italic Text:</strong>
<p class="text-italic">Geeksforgeeks</p>
<strong>Muted Text:</strong>
<p class="text-muted">Geeksforgeeks</p>
<strong>Large Text:</strong>
<p class="text-large">Geeksforgeeks</p>
<strong>Small Text:</strong>
<p class="text-small">Geeksforgeeks</p>
<strong>Tiny Text:</strong>
<p class="text-tiny">Geeksforgeeks</p>
</center>
</body>
</html>
Producción:
Texto de espectro
Referencia: https://picturepan2.github.io/spectre/utilities/text.html
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA