Can't get CSS ellipsis to work - html

Question

I'm very new to the whole responsive web design and I'm building simple todo app to learn with angularJS. My trouble now is how can I handle text that is too long and breaks the layout.
Here you can see how it breaks.
The HTML&CSS is now :
note: This is wrapped with <div class="span12">
<li>
<div>
<span class="taskshorter">{{t.TaskName}}</span>
<div class="pull-right">
<span class="label label-info ">{{t.EstimatedTime}}</span>
<span class="label label-important">{{t.EstimatedTimeLeft}}</span>
<i class="icon-chevron-right"></i>
</div>
</div>
</li>
and CSS
.taskshorter {
overflow: hidden;
white-space: nowrap;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
width: 20px;
height: 1.2em;
}
But it dosen't seem to work. Should I rather write javascript code to clip the text or Am I missing something that can be easily fixed?
Also I'm using Twitter boostrap fluid layout.

Answer 1

You can't set width on an inline element. Add display:inline-block to the CSS.

Answer 2

A not-so-clean, but easy workaround would be to give the right element the same background as the main page.
.pull-right {
background-color: blue; /* your bg color */
float: right;
box-shadow: -2px 0 4px blue; /* just for smoother "cut" */
}
I haven't tested it, might need some more adjustments. If you put an example into JSFiddle, I could adjust it.