Can't get CSS ellipsis to work
css, html, twitter-bootstrap
Solution
You can't set `width` on an inline element. Add `display:inline-block` to the CSS.
Problem
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.