css - Dynamic sized text with ellipsis -

i have header , description text within fixed-size container want on same line.

both have dynamic width.

i want description (which lot longer) appear ellipsis when overflows container.

this have far: fiddle.

markup

<div>     <span class="header">some dynamic-width header</span>     <span class="desc">some dynamic-width description - when long enough - should end ellipsis</span> </div> 

css

div {     width: 400px;     max-width: 400px;     height: 25px;     line-height: 25px;     border-bottom: 2px solid #952262;     color: #111; } .header {     font-weight: bold;     float:left; } .desc {     overflow: hidden;     text-overflow: ellipsis;     white-space: nowrap;     display: inline-block;      width: 100%; } 

any ideas?

just figured out.

i needed display:block on .desc class

fiddle

css

div {     width: 400px;     max-width: 400px;     height: 25px;     line-height: 25px;     border-bottom: 2px solid #952262;     color: #111; } .header {     font-weight: bold;     float:left; } .desc {     overflow: hidden;     text-overflow: ellipsis;     white-space: nowrap;     display: block;  }