我有一个3个线的对象- Text
,Icon
和Date
。
先走Text
,再走Icon
(一直到的末尾Text
)。并且Date
被卡在该行的右侧。
如果Text
时间太长,我希望用省略号将其缩短,但是Icon
应当始终可见(不要用来缩短Text
)。
使用下面的代码,我几乎可以正常使用了,但是Icon固定在右边。
但是我需要坚持下去Text
。请参见下面的代码或此JsFiddle。
HTML:
<div class="wrapper">
<div class="date">right</div>
<div class="icon">[icon]</div>
<div class="text">Long text long text long text long text</div>
</div>
<div class="wrapper">
<div class="date">right</div>
<div class="icon">[icon]</div>
<div class="text">Short text</div>
</div>
CSS:
.wrapper {
width: 200px;
}
.text, .date, .icon {
padding-right: 5px;
}
.text {
text-align:left;
display: block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.date {
float: right;
}
.icon {
float: right;
}
更新:所有字段的宽度可能会有所不同。
这似乎可以在我的Chrome和Opera Presto上使用;Firefox在某些情况下可以工作,但在其他情况下则存在严重问题,这使其不切实际。加上它的结构可能太复杂了。
无论如何,我都会在这里发布它,以防它启发某人:)
(应OP的要求,我在末尾添加了一个涉及JS的解决方案,该解决方案也适用于Firefox)
HTML:
<div class="wrapper">
<div class="date">right</div>
<div class="sub-wrapper">
<div class="final-wrapper">
<div class="icon">[icon]</div>
<div class="text">text</div>
</div>
</div>
</div>
CSS:
div.wrapper {
width:200px;
}
div.date, div.icon, div.text {
padding-right:5px;
}
div.date, div.icon {
float:right;
}
div.sub-wrapper, div.final-wrapper, div.text {
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
div.sub-wrapper {
text-align:left;
}
div.final-wrapper {
display:inline-block;
max-width:100%;
}
基本上,这是递归使用“一件事向右浮动,然后另一件事占据剩余空间”,再加上a.final-wrapper
以便图标可以左对齐。
由于.final-wrapper
isdisplay:inline-block
和.icon
is float
,Firefox只会计算足以容纳的宽度.text
(除非.icon
更长),因此:
如果.text
can的长度可以容纳.icon
,.icon
它将保留,并且省略号将显示,即使看起来有足够的空间;也可以将省略号显示出来。
如果.icon
长于.text
,.icon
则将占据整个位置,.text
并将其推到下一行,从而使包装程序溢出(overflow:hidden
除非您明确指定,否则该方法将不起作用height
)。
结合以上结构,添加一小段JS可以使解决方案对Firefox友好:
document.addEventListener("DOMContentLoaded",function(){
var texts=document.querySelectorAll(".final-wrapper > .icon + .text");
[].forEach.call(texts,function(text){
var icon=text.previousSibling;
while(!icon.classList || !icon.classList.contains("icon")){
icon=icon.previousSibling;
}
var box=icon.getBoundingClientRect();
text.style.marginRight=(box.width+5)+"px";
});
});
它基于这样的假设:.icon
一旦渲染,它将具有固定的宽度。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句