CSS text ellipsis and 100 percent width

The width needs to be added in pixels, percentage wont work along with other three properties as given below:-

.text-ellipsis{
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

No Flex but could work also ... try it.

.element {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.truncate {
  display: table-cell;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

text-overflow ellipsis with 100% width

#div1 {
   white-space: nowrap; 
   width: 12em; 
   overflow: hidden;
   text-overflow: clip; 
   border: 1px solid #000000;
}

 #div2 {
   white-space: nowrap; 
   width: 12em; 
   overflow: hidden;
   text-overflow: ellipsis; 
   border: 1px solid #000000;
}

The following two divs contains a long text that will not fit in the box. As you can see, the text is clipped.

This div uses "text-overflow:clip":

This is some long text that will not fit in the box

This div uses "text-overflow:ellipsis":

This is some long text that will not fit in the box

Try this out:

.titleContent {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Here's and updated jsFiddle