¿Cómo puedo mostrar puntos ("...") en un lapso con desbordamiento oculto?
Mi CSS:
#content_right_head span
{
display:inline-block;
width:180px;
overflow:hidden !important;
}
Ahora muestra contenido
Pero quiero mostrar contenido similar al contenido...
Necesito mostrar puntos después del contenido. Los contenidos provienen dinámicamente de la base de datos.
Para esto puedes usar text-overflow: ellipsis;la propiedad. escribe así
span {
display: inline-block;
width: 180px;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
}<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</span>JSFiddle
Si está utilizando text-overflow:ellipsis, el navegador mostrará todos los contenidos posibles dentro de ese contenedor. Pero si desea especificar la cantidad de letras antes de los puntos o eliminar algunos contenidos y agregar puntos, puede usar la siguiente función.
function add3Dots(string, limit)
{
var dots = "...";
if(string.length > limit)
{
// you can also use substr instead of substring
string = string.substring(0,limit) + dots;
}
return string;
}
llamar como
add3Dots("Hello World",9);
salidas
Hello Wor...
Véalo en acción aquí
function add3Dots(string, limit)
{
var dots = "...";
if(string.length > limit)
{
// you can also use substr instead of substring
string = string.substring(0,limit) + dots;
}
return string;
}
console.log(add3Dots("Hello, how are you doing today?", 10));
text-overflow: ellipsissolo funciona si muestra 1 línea. Si es más, puede usar display: -webkit-boxla propiedad en caso de que desee mostrar más 1 línea. código a continuación para 2 líneas.
line-height: 1.6rem;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
max-height: 3.2rem;
