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

Question

这里是一些示例代码http://jsfiddle.net/XpLSZ/2/

<div class="main">
    <div class="item ">
        <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>
        <span class="count" >(22)</span>
    </div>
</div>

.main{
   border-style: solid;
    border-width: medium;
    width:200px;
}
.icon{
    width:12px;
    height:12px;
}
.truncate {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

Answer 1

1) 更新您的标记，使 count 元素位于标题之前。

2) 向右浮动计数元素

FIDDLE

<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>

CSS

.count {
    float:right;
}

---

更新：

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

像这样：

FIDDLE

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

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