En este artículo, veremos cómo establecer la propiedad de desbordamiento de texto en CSS. La propiedad de desbordamiento de texto se utiliza para especificar que parte del texto se ha desbordado y se ha ocultado a la vista del usuario. La propiedad de desbordamiento de texto solo afecta al contenido que desborda un elemento contenedor de bloques.
Sintaxis:
text-overflow: clip| ellipsis
El valor de la propiedad:
- clip: el texto está recortado y no se puede ver. Este es el valor predeterminado.
- puntos suspensivos: el texto se recorta y el texto recortado se representa como ‘…’.
Nota: La propiedad de espacio en blanco en CSS se usa para controlar el ajuste del texto y el espacio en blanco que encontrará en los ejemplos a continuación.
Ejemplo 1: uso del valor de propiedad del clip .
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
}
.gfg {
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: clip;
border: 1px solid #29bb89;
}
</style>
</head>
<body>
<h1>Welcome to GeeksforGeeks</h1>
<h4>Text overflow: Clip</h4>
<div class="gfg">
A Computer Science portal for
geeks. It contains well written,
well thought and well explained
computer science and programming
articles, quizzes and Gate
preparation Notes.
</div>
</body>
</html>
Producción:
Ejemplo 2: Usar el valor de propiedad de puntos suspensivos .
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
}
.gfg {
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #29bb89;
}
.gfg1 {
white-space: nowrap;
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
border: 3px solid #29bb89;
}
</style>
</head>
<body>
<h1>Welcome to GeeksforGeeks</h1>
<h4>Text overflow: ellipsis</h4>
<div class="gfg">
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science
and programming articles, quizzes
and Gate preparation Notes.
</div>
<br>
<div class="gfg1"> Aman Rathod</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA