Question

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:

<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;
}

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.

Answer 1

the h1 tag is treated like one very long line of text because of no-wrap and this is the reason it just takes so long place as the text and overflowing just could not be applied to it. Consider example with:

.no-wrap {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

http://jsfiddle.net/Sq7Xa/13/

so the h1 forced to take full width of parent container and overflow appied

UPD: little bit closer workaround would be to define actual width to both elements, with small invasion to your code that could looks like http://jsfiddle.net/Sq7Xa/15/, note there is still 2px are inconsistency because of borders around the h1

if you really need keep that border, there is couple workarounds with that:

1. one using box-sizing: border-box; property to h1 http://caniuse.com/css3-boxsizing

   h1 {
     box-sizing: border-box;
     border: 1px solid green;
     width: 80%;
   }
   

2. the other one would require another div into h1 sample code http://jsfiddle.net/Sq7Xa/18/

But yet, I have feeling that things could be done simpler with revising code, especially display: box; which at my point bit extra.