html - テキストオーバーフロー省略記号

Question

私はそのようなhtmlコードを持っています

<li>
  <strong>Name Lastname<span>1</span></strong>
  <span>ok</span>
  <date>Monday, 10th Dec 2012</date>
</li>

とcss

li {
  padding: 0 10px;
}
strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
strong span {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 12px;
  border-radius: 15px;
  color: #fff;
  vertical-align: middle;
  background-color: #9c0;
}
date {
  float: right;
  margin-top: 7px;
  color: #555;
  text-align: right;
  text-transform: uppercase;
}

ウィンドウのサイズを変更するとき、スパンが常に強い要素のテキストの右側になるようにします。ウィンドウが狭い場合、テキストがオーバーフローし、スパンが見えるようにする必要があります。

添付画像をご覧ください

私が欲しいもの

私が持っているもの：

スパンに絶対位置を指定すると、狭いウィンドウでは機能しますが、広いウィンドウでは機能しません（最初のソリューションとは逆）。

クリス。

Answer 1

タグのspan外側に配置strong

HTML

<ul>
    <li>
        <div class="left">
            <img src="http://www.swpc.noaa.gov/sxi/goes14_firstimage_small.jpg" />
            <strong>Name Lastname Lastname</strong><span>1</span>            
        </div>
         <div class="date">Monday 12 Sept 2012</div>
     </li>
</ul>
​

CSS

 ul{margin:0; padding:0}
li {
  padding: 0 10px; list-style:none
}
.left{
    overflow:auto
}
.left img{float:left; position:relative}
strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; margin-right:20px
}
span {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 12px;
  border-radius: 15px;
  color: #fff;
  vertical-align: middle;
  background-color: #9c0; position:absolute; right:0; top:6px
}
.date{float:right; }

</p>

デモ