文本溢出省略号

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;
}

当我调整窗口大小时，我希望我的跨度始终位于强元素文本的右侧。如果窗口很窄，文本应该溢出并且跨度可见。

请参阅附件图片

我想要什么

我有什么：

如果我给出span的绝对位置，它适用于窄窗口，但不适用于宽（与第一个解决方案相反）。

克里斯。

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; }

    

<强> DEMO