오버플로가있는 단일 행 고정 된 내용의 왼쪽 및 고정 된 내용으로 된 줄임표

Question

난 Facett-Checkbox가있는 사이드 바가 있습니다. 사이드 바의 폭이 변경 될 수 있으며 제 통제하에 있지 않습니다. 공간 절약을 위해 한 줄에 체크 박스, 설명 및 결과 수가 필요합니다.

수는 사이드 바 내부에서 오른쪽 정렬되어야하며 체크 박스는 왼쪽에 있어야합니다. 설명은 남은 공간을 오버플로로 가져와야합니다. 접근성을위한 줄임표.

해결책은 css에만 적합합니다. 가능하지 않으면 js도 사용할 수 있습니다. HTML 나은 설명 업데이트 : exemple 코드에 대한

는 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를 참조하십시오.

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

당신은 내가 당신을 위해 작업을 생각 마이너스의 right 속성을 변경하려면이

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

처럼 할 수는