text-overflow ellipsis does not work with dynamic width
Solution 1
Had display: table;
in first div which was causing troubles with the ellipsis. If you delete this then the ellipsis works fine.
I wont delete the question it may help someone
Check it working here: http://jsfiddle.net/vNRpw/6/
Solution 2
What about something like this:
<!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>
The main change was to put a width slightly less than 100% on .c
.
Related videos on Youtube
Dan Stern
Updated on September 15, 2022Comments
-
Dan Stern over 1 year
hope someone can help.
I have 3 nested div. Parent, children and children's children.
What i want to accomplish (the motive is not relevant) is that that child gets a relative width depending on the parent's width (a percentage) and the children's children must have an overflow ellipsis depending on that width. The problem is that if i use a % in the children's width the ellipsis does not work and if i define the width in pixeles it work.
Here is the HTML
<div class="a"> <div class="b"> <div class="c"> Here should go some text long enough to ellipsis the overflow </div> </div> </div>
Here is the nonworking CSS
.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; }
However if i change b's width for 122px it works perfect (note that 122px should equal 100%).
You can check it here: http://jsfiddle.net/vNRpw/4/
Thanks!
-
Bildonia about 10 yearsthis rule caused a ton of trouble with ellipsis in my code. At first it looks like the ellipsis works, until I resized the DIV. Taking display:table out worked perfectly. Thanks!
-
SearchForKnowledge over 9 yearsMine stays in one line and shows the ellipses. stackoverflow.com/questions/26342411/…
-
SearchForKnowledge over 9 yearsMine displays in one line without going to the next line of the DIV stackoverflow.com/questions/26342411/…
-
Junle Li over 9 yearsI add ellipsis in side Bootstrap's
input-group
which hasdisplay:table
. Besides removedisplay:table
, any other way to resolve this? Update: it turns to another question: stackoverflow.com/questions/9789723/… -
Mihai Popescu about 9 yearshad the same problem with display:inline-table. changed to inline block and fixed it.