Text overflow not working in box display with horizontal box-orient

hellaway

New Member
I am using the box display, but I cannot get my text to properly render an ellipsis. Right now the text is just overflowing past the containing element.HTML:\[code\]<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>\[/code\]CSS:\[code\].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;}\[/code\]Example here: http://jsfiddle.net/bmclachlin/Sq7Xa/I've tried wrapping the h1 in a div, changing the h1 to a div, etc., but nothing seems to work. I know I'm probably missing something obvious, any ideas?Note: This code is being generated from a JavaScript library called qooxdoo, so I don't have the ability to change the structure too much. I can change the h1 to a different element as well as wrap the h1 in a div if I wanted to.
 
Back
Top