Rupturas de línea y división de palabras
Aunque en su editor HTML, deje líneas en blanco o introduzca saltos de línea forzados en un párrafo, se ha comentado anteriormente que el navegador realiza la omisión de los mismos, ya que la forma de indicar un salto es mediante las etiquetas de párrafo.
Pero se puede realizar el forzado de salto de línea, utilizando para ello la etiqueta <br>, esta etiqueta permite realizar la inserción forzada de un salto de línea en el navegador.
Es una etiqueta de las denominadas “vacías”, es decir no tiene ni contenido, ni etiqueta de cierre.
El salto de línea se produce en el lugar donde se sitúe la etiqueta y se mantiene independientemente aun cuando se altere el ancho de visualización del documento en el navegador. Como recomendación se indica que se ha de utilizar esta etiqueta solo para insertar saltos de línea forzados en el párrafo, y no utilizarla como separador de párrafos.
La sintaxis de la etiqueta es la siguiente:
<p>Este párrafo contiene un<br> salto de línea forzado</p>
Otro posible pequeño problema, es cuando en un documento existen párrafos de gran tamaño, y en ellos se pueden encontrar palabras de un tamaño considerable, posiblemente porque sean términos técnicos. Si se intenta cambiar el ancho de visualización del navegador, el ajuste de párrafo que se produce, puede ocasionar que el párrafo no se visualice lo más justificado posible.
Para solventar el problema expuesto, existe la siguiente etiqueta <wbr>, que permite definir por donde se realiza el salto de línea en un término que sea muy grande. Mientras que el texto quepa sin problemas en la línea del párrafo no se produce ningún corte en la palabra, si el termino no cabe en la línea, el navegador corta la palabra en el lugar donde se encuentra la etiqueta.
Al igual que la etiqueta anterior, es una etiqueta denominada “vacía”, por tanto no tiene ni contenido, ni etiqueta de cierre.
La sintaxis de la etiqueta es la siguiente
<p>En este párrafo la palabra Super<wbr>Fragilistico<wbr>Espialidoso es muy amplia</p>
El siguiente ejemplo muestra el uso de las etiquetas en un documento web.
<!DOCTYPE HTML>
<html>
<head>
<title>Ejercicios prácticos HTML5</title>
<meta charset="utf-8">
<meta name="author" content="José Sáez">
<meta name="description" content="Ejercicios prácticos HTML5">
<meta name="generator" content="Ejercicios prácticos HTML5">
<meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5">
</head>
<body>
<p>Al contrario del pensamiento popular, el texto de Lorem Ipsum no es simplemente texto aleatorio.<br>Tiene sus raíces en una pieza clásica de la literatura del Latín, que data del año 45 antes de Cristo, haciendo que este adquiera más de 2000 años de antigüedad.<br> Richard McClintock, un profesor de Latín de la Universidad de<mark> Hampden<wbr>-Sydney</mark> en Virginia, encontró una de las palabras más oscuras de la lengua del latín, "consecteur", en un pasaje de Lorem Ipsum, y al seguir leyendo distintos textos del latín, descubrió la fuente indudable. </p>
</body>
</html>
El resultado del ejercicio anterior ha de ser similar al que se muestra a continuación.
Gracias por vuestra visita y un saludo!!!