我有这样的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;
}
当我调整窗口大小时,我希望我的跨度始终位于 strong 元素中文本的右侧。如果窗口很窄,文本应该溢出并可见。
请看附件
我想要什么
我有什么:
如果我为跨度提供绝对位置,它适用于窄窗口,但不适用于宽窗口(与第一个解决方案相反)。
克里斯。
最佳答案
将 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; }
关于html - 文本溢出省略号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13820154/