Menu
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!
372
text-overflow: ellipsis only works when the following is true: Parent element is not set to display: inline (span's default,) You must use display: block or display: inline-block. The element's width must be constrained in px (pixels) – it doesn't work with values specified using % (percent.)
The text-overflow property in CSS deals with situations where text is clipped when it overflows the element's box. It can be clipped (i.e. cut off, hidden), display an ellipsis ('…', Unicode Range Value U+2026) or display an author-defined string (no current browser support for author-defined strings).
The text-overflow CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis (' … '), or display a custom string.
A text-overflow property in CSS is used to specify that some text has overflown and hidden from view. The white-space property must be set to nowrap and the overflow property must be set to hidden. The overflowing content can be clipped, display an ellipsis ('…'), or display a custom string.
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/
107
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.
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
