帶有溢出的單排省略了固定內容和固定內容的省略號

Question

我有一個帶Facett-Checkboxes的邊欄。 側邊欄的寬度可以更改，但不在我的控制之下。 我想在一行中有一個複選框，說明和結果計數以節省空間。

計數應該在側欄內右對齊，左邊的複選框。描述應該將餘下的空間溢出：省略號表示可訪問性。

該解決方案僅適用於CSS。如果不可能的話，也可以使用js。

對於爲例碼看https://jsfiddle.net/z9d8qjsb/7/

HTML

<div class="sidebar_a"> 
<div class="row"> 
    <input id="ckb" type="checkbox" /> 
    <label for="ckb"> 
     <span class="text">Description that can be verry long and should use ellipsis</span> 
     <span class="count">(xxxx)</span> 
    </label> 
    </div> 
    <div class="row"> 
    <input id="ckb" type="checkbox" /> 
    <label for="ckb"> 
    <span class="text">Short Desc.</span> 
     <span class="count">(xxxx)</span> 
    </label> 
    </div> 
</div> 
<div class="sidebar_b"> 
    <div class="row"> 
    <input id="ckb" type="checkbox" /> 
    <label for="ckb"> 
     <span class="text">Description that can be verry long and should use ellipsis</span> 
     <span class="count">(xxxx)</span> 
    </label> 
    </div> 
    <div class="row"> 
    <input id="ckb" type="checkbox" /> 
    <label for="ckb"> 
    <span class="text">Short Desc.</span> 
     <span class="count">(xxxx)</span> 
    </label> 
    </div> 
</div> 

CSS

.sidebar_a { 
    width: 500px; 
    } 

    .sidebar_b { 
    width: 100px; 
    } 

    .sidebar_a, .sidebar_b { 
    border: 2px solid black; /*only for illustration*/ 
    } 

    .row { 
    position: relative; 
    } 
.text { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    text-align: left; 
    width: 70%; 
    white-space: nowrap; 
    display: inline-block; 
    vertical-align: middle; 
} 

.count { 
    position: absolute; 
} 

UPDATE：HTML更新的更好的解釋。

Answer 1

.sidebar { 
 
    // width: 200px; 
 
    border; 
 
    2px solid black; 
 
    position: relative; 
 
} 
 

 
.row { 
 
    position: relative; 
 
} 
 

 
.text { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    text-align: left; 
 
    white-space: nowrap; 
 
    width: 200px; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    position: relative; 
 
} 
 

 
.count { 
 
    right: 5px; 
 
    position: absolute; 
 
} 
 

 
#ckb { 
 
    float: left; 
 
    width: auto; 
 
    margin-top:6px; 
 
} 
 

 
label { 
 
    float: left; 
 
    width: auto; 
 
    position: relative; 
 
    width: 300px; 
 
}

<div class="sidebar"> 
 
    <div class="row"> 
 
    <input id="ckb" type="checkbox" /> 
 
    <label for="ckb"> 
 
     <span class="text">Description that can be verry long and should use ellipsis</span> 
 
     <span class="count">(xxxx)</span> 
 
    </label> 
 
    </div> 
 
</div>

Answer 2

你可以這樣做

.count { 
    right: -5px; 
    position: absolute; 
} 

我改變right性質減去我認爲它爲你工作