43 - Tipografía : abreviaturas e iniciales
Bootstrap 5 redefine estilos para el elemento HTML <abbr> que se emplea para indicar abreviaturas y acrónimos.
Una abreviatura representa una palabra pero solo escribimos una o varias letras de la misma y un acrónimo es una palabra que se forma generalmente con el primer caracter de un conjunto de palabras.
La siguiente página define una abreviatura y un acrónimo:
<!doctype html>
<html>
<head>
<title>Prueba de Bootstrap 5</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
</head>
<body>
<div class="container">
<p>Este es un ejemplo de una abreviatura <abbr title="Señor/a">Sr./a.</abbr></p>
<hr>
<p>Este es un ejemplo de un acrónimo <abbr title="Objeto Volador No Identificado" class="initialism">ovni</abbr></p>
</div>
</body>
</html>
Tanto para abreviaturas y acrónimos empleamos el elemento HTML <abbr>.
En la definición de una abreviatura y un acrónimo indicamos la propiedad title con el valor que se mostrará cuando pasemos con la flecha del mouse.
En un acrónimo además especificamos la clase class="initialism" (esto hace que el texto que se muestre siempre aparece en mayúsculas.
En el navegador tenemos la siguiente representación:
