单行，带有左固定内容和右固定内容的溢出省略号

Question

我有一个带有快捷键复选框的侧边栏。侧边栏的宽度可以改变，不在我的控制之下。我想在一行中有一个复选框，一个描述和结果计数，以节省空间。

计数应该在侧边栏中右对齐，复选框左对齐。描述应该使用overflow:省略号表示可访问性的剩余空间。

该解决方案仅适用于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;
}

更新:为了更好的解释，更新了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属性改成了-，我想这对你是有效的