38 - Tipografía : abreviaturas e iniciales
Bootstrap 4 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 4</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 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:
