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

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 实现吗？ (我不想截断计数)现在我在 JS 中做了一些截断，但问题是布局在某些浏览器中是不同的，而且它也会在某些缩放级别上制动。

Answer 1

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

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好像不喜欢 float count元素，相反，我们可以绝对将count元素定位到右边，并在parent中为它留出空间。

像这样:

FIDDLE

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

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