Question

我有一个带Facett-Checkboxes的侧边栏。侧边栏的宽度可以改变，不受我的控制。我希望在一行中有一个复选框，一个描述和结果计数，以节省空间。

计数应该在侧边栏内右对齐，左边是复选框。描述应该采用溢出的剩余空间：省略用于可访问性。

该解决方案仅适用于css。如果不可能，也可以使用js。

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属性，我觉得它适用于你

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

2 个答案: