我在使用省略号属性时遇到了一些奇怪的行为。它完美地适用于一个span元素,但不适用于另一个完全相同的span:
这怎么可能呢?有人知道如何解决该问题吗?任何帮助是极大的赞赏。
这是我的html:
<div class="parent">
<span class="ellipsis">sadkljasjkfdhkjlhas-qdasfqewrwqe.pdf</span>
<div class="icons-right">
<a href="#"><img src="edit-icon.gif"></a>
<a href="#"><img src="delete-icon.gif"></a>
</div>
</div>
<div class="parent">
<span class="ellipsis">terribly-terribly-long-filename.doc</span>
<div class="icons-right">
<a href="#"><img src="edit-icon.gif"></a>
<a href="#"><img src="delete-icon.gif"></a>
</div>
</div>
和CSS:
.parent{
height: 50px;
padding-left: 15px;
}
.ellipsis{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-top: 15px;
display: block;
}
.icons-right{
position: relative;
top: -25px;
float: right;
width: 62px;
}
*, *::before, *::after {
box-sizing: border-box;
}
有人知道如何解决该问题吗?
添加margin-right: 62px;
到.ellipsis
。
这是因为您float: right; position: relative; top: -15px
的.icons权利。
删除top: -15;
,您将看到盒子模型。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句