Las hojas de estilo en cascada, conocidas con cariño como CSS , son un lenguaje de diseño simple destinado a simplificar el proceso de hacer que las páginas web sean presentables. CSS le permite aplicar estilos a las páginas web. Más importante aún, CSS le permite hacer esto independientemente del HTML que conforma cada página web.
CSS es fácil de aprender y comprender, pero brinda un poderoso control sobre la presentación de un documento HTML .
En este artículo, aprenderemos cómo evitar que las palabras largas rompan mi división HTML.
Podemos evitar una palabra larga sin romper su elemento HTML div mediante varias técnicas.
Acercarse:
- Estamos utilizando un elemento div HTML en el que mostraremos el elemento de párrafo HTML .
- Utilizamos guiones suaves de separación de palabras y <wbr> en el elemento de párrafo para mostrar el resultado.
Ejemplo 1: En este ejemplo, podemos hacer uso de un guión suave(). Un guión suave evitará que las palabras largas rompan el elemento div de HTML .
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p{
color:black;
text-align:center;
}
div{
border:2px solid black;
width:200px;
margin-left:20px;
background-color:lightgrey;
}
</style>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<div>
<p>Acomputerscienceprotalforgeeks</p>
</div>
</body>
</html>
Producción:
Ejemplo 2: En esta técnica, podemos hacer uso de la etiqueta word break <wbr> . Se utiliza para especificar en qué parte del texto estaría bien agregar un salto de línea.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p{
color:black;
text-align:center;
}
div{
border:2px solid black;
width:200px;
margin-left:20px;
background-color:lightgrey;
}
</style>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<div>
<p>A<wbr>computerscienceprotalforgeeks</p>
</div>
</body>
</html>
Producción:
