Блог

вот несколько примеров кода 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, но проблема в том, что макет отличается в некоторых браузерах, а также тормозит на некоторых уровнях масштабирования.

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>
  

CSS

 .count {
    float:right;
}
  

Обновить:

Ну, похоже, что FF не любит перемещать элемент count, вместо этого мы можем абсолютно расположить элемент count справа и оставить для него место в родительском элементе.

Вот так:

СКРИПКА

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

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