I am having trouble making the text in my box display properly render an ellipsis. It is currently overflowing beyond the containing element.
HTML:
<div class="outer hbox">
<div class="hbox left-container">
<div class="label no-wrap box-centered">Col1</div>
</div>
<h1 class="label no-wrap">really long title really long title really long title really long title really long title really long title really long title really long title really long title</h1>
</div>
CSS:
.outer {
width: 400px;
border: 1px solid black;
}
.hbox {
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
box-orient: horizontal;
display: -moz-box;
display: -webkit-box;
display: box;
}
.left-container {
border: 1px solid red;
}
.no-wrap {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
h1 {
border: 1px solid green;
}
An example can be viewed here: http://jsfiddle.net/bmclachlin/Sq7Xa/
I have attempted different solutions such as wrapping the h1 in a div or changing it to a different element, but nothing seems to solve the issue. I feel like I might be overlooking something obvious, any suggestions?
Please note that this code is produced by a JavaScript library called qooxdoo, limiting my ability to make extensive structural changes. However, I do have the option to switch the h1 to a different element or wrap it in a div if necessary.