En este artículo, vamos a cubrir cómo se puede envolver el texto dentro y fuera del cuadro usando las propiedades CSS.
Enfoque: Usaremos la propiedad » overflow-wrap «. Esta propiedad entra en escena cuando la longitud del contenido supera la longitud del componente principal. La propiedad “ overflow-wrap ” puede tener principalmente cinco valores.
- normal
- romper-palabra
- heredar
- inicial
- desarmado
El valor «normal» dividirá las líneas de acuerdo con las reglas normales de división de líneas del navegador. El » heredar » heredará la propiedad del elemento padre. Pero el valor que estamos buscando es la “ palabra de ruptura ”.
La propiedad “ break-word” romperá cualquier string o palabra que exceda el límite del bloque principal o división e intentará encajar el contenido en el bloque proporcionando una nueva línea.
Le daremos la propiedad de alto y ancho para fijar el valor y no para auto , ya que auto aumenta el ancho en función de la longitud del contenido.
Código HTML: hemos creado un div con el nombre de clase » box » que es responsable de dar las condiciones fijas de alto , ancho y desbordamiento. Dentro de este cuadro div , tenemos nuestra etiqueta de contenido < p> que contiene valores de string.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
body {
background-color: #242B2E;
color: white;
}
.box {
margin: 30px;
height: 100px;
width: 100px;
background-color: #FF6666;
overflow-wrap: break-word;
}
.p {
color: white;
margin: 5px;
padding: 10px;
}
</style>
</head>
<body>
<div class="box">
<p>
try to read this word
chekolosvakialRegion
</p>
</div>
</body>
</html>
Caja de clase sin condición de desbordamiento: si el CSS utilizado anteriormente se cambia al siguiente para la clase » caja «.
En lo anterior, no hemos dado ninguna condición de desbordamiento en el cuadro de clase, por lo que se seguirá el comportamiento normal y no se romperán las líneas hasta que no se especifique la línea de ruptura, que es un espacio en blanco. En este caso, nuestro contenido desbordará la caja.
Producción:
contenido que excede los límites
Cuadro de clase con condición de desbordamiento: si el CSS anterior se modifica con el siguiente código.
Después de proporcionar la condición de desbordamiento en el cuadro de bloque principal, logramos el ajuste de palabras en el contenido. Cada vez que el contenido de la etiqueta <p> intente exceder el límite, nuestro overflow-wrap: break-word romperá la palabra «chekolosvakialRegion» e intentará encajar en el cuadro.
Producción:
overflow-wrap: romper-palabra
Hemos envuelto con éxito el contenido dentro y fuera de la caja usando la propiedad CSS.
Publicación traducida automáticamente
Artículo escrito por jymnjogiya y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA