CSS:带有正确附件的省略号应始终可见

维亚切斯拉夫

我有一个3个线的对象- TextIconDate

先走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)

解决方案:

jsfiddle演示

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以便图标可以左对齐。

Firefox中的问题:

由于.final-wrapperisdisplay:inline-block.iconis float,Firefox只会计算足以容纳的宽度.text(除非.icon更长),因此:
如果.textcan的长度可以容纳.icon.icon它将保留,并且省略号将显示,即使看起来有足够的空间;也可以将省略号显示出来。
如果.icon长于.text.icon则将占据整个位置,.text并将其推到下一行,从而使包装程序溢出(overflow:hidden除非您明确指定,否则该方法将不起作用height)。


JS解决方案:

结合以上结构,添加一小段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";
    });
});

jsfiddle演示

它基于这样的假设:.icon一旦渲染它将具有固定的宽度。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

带有省略号的CSS文字换行

来自分类Dev

带有内联元素的CSS省略号?

来自分类Dev

CSS div自动调整大小到内容,带有最大宽度和省略号文本

来自分类Dev

CSS 文本溢出省略号无法正确显示

来自分类Dev

带有省略号的动态文本旁边的滑动图标

来自分类Dev

相等但动态大小的列,带有省略号

来自分类Dev

截断标题旁边带有省略号的文本

来自分类Dev

内联元素在文本上带有省略号

来自分类Dev

flex项目内的CSS省略号

来自分类Dev

居中渐变省略号CSS阴影

来自分类Dev

带有图标的Android抽屉始终可见

来自分类Dev

带有列表的始终可见的菜单组件

来自分类Dev

框中的多行带有省略号和中间垂直对齐

来自分类Dev

Bootstrap面板标题:标题文本右侧带有省略号和按钮

来自分类Dev

在带有文本溢出省略号的行之后放置图标

来自分类Dev

带有文件扩展名的文本溢出省略号

来自分类Dev

sprintf在C中带有省略号,用于宏定义会导致编译错误

来自分类Dev

Firefox:带有省略号的div-无法看到内部范围

来自分类Dev

选择对象上的空格和带有省略号的截断

来自分类Dev

Android TextView剪辑的文本开头是否带有省略号?

来自分类Dev

处理省略号

来自分类Dev

结构省略号

来自分类Dev

具有3个点的CSS“省略号”的Angular 7垫选择问题

来自分类Dev

将工具提示添加到具有CSS文本溢出的元素:省略号

来自分类Dev

如何在嵌套函数中正确使用省略号

来自分类Dev

如何创建一个带有长文本右对齐的 QTableWidgetItem,左边有省略号?

来自分类Dev

省略项中的省略号省略

来自分类Dev

三行或更多行的纯CSS省略号

来自分类Dev

CSS文字省略号和100%宽度

Related 相关文章

热门标签

归档