Etiqueta wbr
La etiqueta wbr indica un lugar donde el navegador
puede insertar un salto de línea si es necesario
(si el texto no cabe en el ancho del elemento).
Estos saltos de línea se denominan guiones blandos.
No requiere etiqueta de cierre.
Al dividir una palabra mediante la etiqueta wbr, el símbolo
de guion "-" no se añade. Si
lo necesita, utilice el símbolo de guion blando
­ (el punto y coma
al final es obligatorio, no es un error tipográfico).
El guion blando ­ indica
al navegador un lugar donde puede dividir la palabra
(si es necesario), colocando
para ello el símbolo de guion "-".
Los guiones blandos ­ no
funcionarán si la propiedad hyphens
está establecida con el valor none (pero los saltos de línea
wbr sí funcionarán).
Ejemplo . Texto sin saltos de línea
Echemos un vistazo a un texto de ejemplo que contiene palabras largas que se salen de los límites del bloque. Al bloque le asignaremos un ancho pequeño para que una palabra larga no quepa en él:
<div id="elem">
this is supersupersuperlong text
</div>
#elem {
width: 200px;
border: 1px solid black;
}
:
Ejemplo . Etiqueta wbr
Y aquí, agreguemos la etiqueta wbr en
los lugares donde recomendamos al navegador que realice
una división de palabra si es necesario (preste
atención al hecho de que el navegador realizará los saltos de línea
no en todos los lugares que indicamos):
<div id="elem">
this is super<wbr>super<wbr>super<wbr>long text
</div>
#elem {
width: 200px;
border: 1px solid black;
}
:
Ejemplo . Símbolo ­
Intentemos colocar el símbolo ­
en lugar de la etiqueta wbr.
En los lugares de salto de línea se mostrarán guiones:
<div id="elem">
this is supersupersuperlong text
</div>
#elem {
width: 200px;
border: 1px solid black;
}
:
Véase también
-
la etiqueta
br,
,
que realiza un salto de línea -
la propiedad
hyphens,
que establece la división de palabras con guion -
las propiedades
word-breakyoverflow-wrap,
que permiten dividir las letras de una palabra larga -
la propiedad
overflow,
que recorta las partes que se salen de los límites del bloque
