html - Can't get CSS ellipsis to work -


i'm new whole responsive web design , i'm building simple todo app learn angularjs. trouble how can handle text long , breaks layout.

here can see how breaks. enter image description here

enter image description here

the html&css :

note: wrapped <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 dosen't seem work. should rather write javascript code clip text or missing can fixed?

also i'm using twitter boostrap fluid layout.

you can't set width on inline element. add display:inline-block css.


Comments

Popular posts from this blog

linux - Does gcc have any options to add version info in ELF binary file? -

android - send complex objects as post php java -

charts - What graph/dashboard product is facebook using in Dashboard: PUE & WUE -