La propiedad overflow-wrap en CSS se usa para especificar que el navegador puede romper líneas de texto dentro de cualquier elemento de destino para evitar el desbordamiento cuando la string original es demasiado larga para caber. Esta propiedad se conocía anteriormente como word-wrap y aún es compatible con algunos navegadores, pero se le cambió el nombre a overflow-wrap en un borrador de CSS3.
Sintaxis:
.box{
overflow-wrap: break-word;
}
Valores:
- normal: las líneas se dividirán de acuerdo con las reglas originales de división de líneas.
- break-word: Las palabras que son demasiado largas para caber en un contenedor-elemento se dividen en partes.
- heredar: permite que el elemento herede el valor de su padre.
- initial: Hace que la propiedad use su valor por defecto.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
CSS overflow-wrap property
</title>
<style>
p {
color: green;
}
.gfg {
margin: auto;
padding: 15px 15px;
color: white;
background-color: green;
font-size: 20px;
width: 60px;
overflow-wrap: break-word;
}
div {
text-align: justify;
}
h1,
h2 {
color: green;
}
h1,
h2 {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>overflow-wrap property</h2>
<div class="gfg">
A computer science portal for geeks.
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por AakashYadav4 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA