En este artículo, veremos cómo envolver texto/palabra larga en un lapso de ancho fijo. La propiedad word-wrap en CSS se usa para dividir palabras largas y envolverlas en la siguiente línea. Define si dividir palabras cuando el contenido excede los límites de su contenedor.
Sintaxis:
word-wrap: normal|break-word|initial|inherit;
Ejemplo 1: El siguiente código demuestra el valor «normal» para la propiedad de ajuste de línea . El texto está roto y se muestra con un borde.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
div
{
word-wrap:normal;
width: 150px;
border: 1px solid black;
}
</style>
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<div>
GeeksforGeeks:AComputerSciencePortalForGeeks
</div>
</body>
</html>
Salida :
Ejemplo 2: el siguiente código demuestra el valor de «palabra de ruptura» para la propiedad de ajuste de palabra . El texto está roto, lo que se muestra en la siguiente línea dentro del cuadro bordeado, ya que excede el ancho dado.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
div
{
word-wrap:break-word;
width: 150px;
border:1px solid black;
}
</style>
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<div>
GeeksforGeeks:AComputerSciencePortalForGeeks
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sravankumar8128 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA