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>

演示