css - limitar - La elipsis de desbordamiento de texto no funciona con ancho dinámico
limitar caracteres css (2)
¿Qué tal algo como esto?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
.a {
border:black 1px solid;
float: left;
width: 50%;
line-height: 14px;
}
.b {
width:100%;
color: black;
font-size: 14px;
text-transform: uppercase;
cursor: pointer;
}
.c {
line-height: 11px;
width: 98%;
text-overflow: ellipsis;
overflow: hidden;
white-space:nowrap;
}
</style>
</head>
<body>
<div class="a">
<div class="b">
<div class="c">
Here should go some text long enough to ellipsis the overflow
</div>
</div>
</div>
</body>
</html>
El principal cambio fue poner un ancho ligeramente inferior al 100% en .c .
Espero que alguien pueda ayudar.
Tengo 3 div anidados Padres, hijos e hijos de los niños.
Lo que quiero lograr (el motivo no es relevante) es que ese niño obtiene un ancho relativo según el ancho de los padres (un porcentaje) y los hijos de los niños deben tener puntos suspensivos de desbordamiento según ese ancho. El problema es que si uso un% en el ancho de los niños, la elipsis no funciona y si defino el ancho en píxeles, funcionará.
Aquí está el HTML
<div class="a">
<div class="b">
<div class="c">
Here should go some text long enough to ellipsis the overflow
</div>
</div>
</div>
Aquí está el CSS que no funciona
.a {
border:black 1px solid;
float: left;
width: 122px;
display: table;
line-height: 14px;
}
.b {
width:100%;
color: black;
font-size: 14px;
text-transform: uppercase;
cursor: pointer;
}
.c {
line-height: 11px;
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space:nowrap;
}
Sin embargo, si cambio el ancho de b para 122px, funciona perfectamente (tenga en cuenta que 122px debería ser igual al 100%).
Puede comprobarlo aquí: http://jsfiddle.net/vNRpw/4/
¡Gracias!
Tenía display: table; En el primer div que causaba problemas con los puntos suspensivos. Si borras esto, entonces la elipsis funciona bien.
No borraré la pregunta, puede ayudar a alguien.
Compruébelo trabajando aquí: http://jsfiddle.net/vNRpw/6/