“文本溢出:省略号"指的是“在Firefox中无法正常工作，周围有浮动元素 [英] "text-overflow: ellipsis" not working well in firefox with floating element around

问题描述

请参阅jsfiddle: http://jsfiddle.net/9v8faLeh/1/

see jsfiddle: http://jsfiddle.net/9v8faLeh/1/

在.container中，我有两个元素.text和.badge，其宽度限制为:

I have two elements .text and .badge in a .container with a limit width:

<div class="container">
    <span class="badge">(*)</span>
    <span class="text">this is a long long long long text.</span>
</div>

根据数据，

.badge元素可能不存在于.container中.如果.badge存在，我希望.badge元素浮动到右边.如果.text太长，则文本应为省略号.

the .badge element may not exist in a .container according to the data. if a .badge exist, I want the .badge element to float to right. and if the .text is too long, the text should ellipsis.

.container {
    width: 150px;
    border: 1px solid;
    padding: 5px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.badge {
    float: right;
    margin-left: 5px;
}

如果您在Chrome或IE中打开jsfiddle链接，则它会按照我的期望正确显示.
但是如果在Firefox中打开，则如果文本太长，则.text和.badge会被覆盖.

if you open the jsfiddle link in Chrome or IE, it displays correctly as my expectation.
but if open in Firefox, the .text and .badge are overlay if the text is so long.

我不想使用任何JavaScript.如何在FireFox中获得相同的结果?

I don't want to use any JavaScript. how can I achieve the same result in FireFox?

推荐答案

只需将<span class="badge">(*)</span>放在<span class="text">this is a long long long long text.</span>内，就像这样:

Just put <span class="badge">(*)</span> inside <span class="text">this is a long long long long text.</span> like this:

<span class="text">this is a long long long long text.<span class="badge">(*)</span></span>

然后在CSS中

.container {
    width: 150px;
    border: 1px solid;
    padding: 5px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display:block;
}
.badge {
    display:inline-block;
}
.hide {
    display: none;
}

这篇关于“文本溢出:省略号"指的是“在Firefox中无法正常工作，周围有浮动元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！