En este artículo, aprenderemos cómo ocultar texto que va más allá del elemento DIV usando CSS. Este problema ocurre básicamente cuando la altura y el ancho del elemento DIV son pequeños, de modo que no se puede colocar todo el texto en ese DIv.
SALIDA DE TEXTO
Aquí, el área del elemento DIV se muestra con un borde rojo y podemos ver claramente que el texto va más allá.
Podemos resolver este problema usando la propiedad de desbordamiento de CSS .
desbordamiento: oculto;
oculto: el desbordamiento se recorta y el resto del contenido será invisible.
Ejemplo:
.gfg{
height: 50px;
width: 100px;
overflow: hidden;
}
Implementación de código:
HTML
<!DOCTYPE html>
<html lang="en">
<!-- Adding css -->
<style>
.gfg {
margin: 50px auto;
width: 80px;
height: 30px;
border: 1px solid red;
overflow: hidden;
}
</style>
<body>
<div class="gfg">
GeeksForGeeks Articles
</div>
</body>
</html>
Producción:
los elementos de desbordamiento están ocultos
Publicación traducida automáticamente
Artículo escrito por hritikrommie y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA