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）更新你的标记，使count元素在标题之前。

2）将count元素向右浮动

<强> 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;
}

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

1 个答案:

CSS