Varias utilidades y diseños proporcionados de forma predeterminada en Bootstrap 4 para ocultar el texto desbordado como puntos suspensivos usando columnas dinámicas de arranque. Aquí, las columnas dinámicas de arranque significan que las columnas en fila o flexibles tienen propiedades iguales incluso en cualquier número. Los siguientes enfoques lo explicarán claramente.
Enfoque 1: para ocultar el texto desbordado como puntos suspensivos usando las propiedades de CSS.
<style>
selector {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
Luego agregue su selección al elemento de la clase col y envuélvalo dentro de la etiqueta div. También podemos usar d-flex en lugar de fila.
- Ejemplo 1: El siguiente programa ilustra cómo ocultar el texto desbordado como puntos suspensivos usando columnas dinámicas de arranque usando propiedades CSS y Flex.
<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href=<scriptsrc=</script><scriptsrc=</script><scriptsrc=</script><style>/* Use CSS properties for ellipsis */.ellipsis {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}.purple {background-color: purple;}</style></head><body><divclass="container"><center><h1style="color:green;padding:13px;">GeeksforGeeeks</h1><br><br><p><strong>6 column flex grid</strong></p><divclass="d-flex bg-light mb-3"><divclass="col ellipsis bg-primary text-white">A Computer Science Portal for Geeks</div><divclass="col ellipsis bg-success text-white">A Computer Science Portal for Geeks</div><divclass="col ellipsis bg-danger text-white">A Computer Science Portal for Geeks</div><divclass="col ellipsis bg-warning text-white">A Computer Science Portal for Geeks</div><divclass="col ellipsis bg-dark text-white">A Computer Science Portal for Geeks</div><divclass="col ellipsis purple text-white">A Computer Science Portal for Geeks</div></div></center></div></body></html> - Producción:
Enfoque 2: para ocultar el texto desbordado como puntos suspensivos usando las utilidades Bootstrap4 de la siguiente manera.
<div class=”col overflow-hidden text-truncate text-nowrap”></div>
Luego use la función jQueries append() para agregar el elemento col de la clase a la etiqueta div de la fila de la clase.
$(‘.row’).append(‘<div class=”col overflow-hidden text-truncate text-nowrap “>Lorem ipsum dolor sit amet, consectetur adipiscing</div>’);
Finalmente, use la declaración de bucle / condición para generar columnas dinámicamente
- Ejemplo 2: El siguiente programa ilustra cómo ocultar el texto desbordado como puntos suspensivos usando columnas dinámicas de arranque usando las utilidades Bootstrap4 y jQuery.
<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href=<scriptsrc=</script><scriptsrc=</script><scriptsrc=</script></head><body><divclass="container"><center><h1style="color:green;padding:13px;">GeeksforGeeeks</h1><br><br><p><strong>12 column grid</strong></p><divclass="row"><!-- Using Bootstrap 4 utilities for ellipsis--><divclass="col overflow-hiddentext-truncate text-nowrap borderborder-warning bg-bright">GeeksforGeeks</div></div></center></div><script>$(document).ready(function() {var cols = 12;// Looping til 12 colfor (i = 1; i <cols; i++)// Appending class col div tag{$('.row').append('<div class="col overflow-hidden text-truncate'+' text-nowrap border border-warning bg-bright">'+' GeeksforGeeks</div>');}});</script></body></html> - Producción:
Publicación traducida automáticamente
Artículo escrito por VigneshKannan3 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA