Css 如何截断文本以更好地适应可用空间

下面是一些示例代码

这是一个很长的题目
(22)
梅因先生{
边框样式：实心；
边框宽度：中等；
宽度：200px；
}
.图标{
宽度：12px；
高度：12px；
}
.截断{
宽度：100%；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}

我想要的是有一个带有icon.title和count的行，并将标题截断而不是换行，这在css中可能吗？（我不希望计数被截断） 现在我在JS中做了一些截断，但问题是在某些浏览器中布局是不同的，而且在某些缩放级别上它会停止

1）更新标记，使count元素位于标题之前

2） 将count元素向右浮动

<div class="main">
    <div class="item truncate">
        <span class="count">(22)</span>
        <img class="icon" src="https://www.google.com/s2/favicons?domain=http://planet.clojure.in" /> 
        <span class="title ">This is a test Long title </span>
    </div>
</div>

.item {
    padding-right:25px;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
    position:relative;
}

.count {
    position:absolute;
    right:0;
}

---

更新：

FF似乎不喜欢浮动count元素，相反，我们可以完全将count元素定位到右侧，并在父元素中为其留出空间

像这样：

<div class="main">
    <div class="item truncate">
        <span class="count">(22)</span>
        <img class="icon" src="https://www.google.com/s2/favicons?domain=http://planet.clojure.in" /> 
        <span class="title ">This is a test Long title </span>
    </div>
</div>

.item {
    padding-right:25px;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
    position:relative;
}

.count {
    position:absolute;
    right:0;
}

---

谢谢，它在Chrome上运行良好，在Firefox中存在重叠（我可以在count文本下看到一个l，你对此FF问题有解决办法吗？@simion314-我更新了我的答案，该答案适用于webkit、Firefox和IE（刚刚验证了这一点）