如何用text-overflow:ellipsis实现列表项长文本优雅截断（基于现有CSS&HTML）

当然可以搞定这个问题！我们只需要调整布局样式，既能让长名称用text-overflow: ellipsis优雅截断，又能避免右侧ID换行。下面是具体的实现方案：

调整后的CSS代码 #

.my-list {
  width: 275px;
}

/* 给列表项设置内边距，为右侧ID预留空间 */
.preferred-payer.list-group-item {
  position: relative;
  padding-right: 60px; /* 根据ID长度调整，确保不会被截断 */
}

/* 将ID固定在右侧，避免被长文本挤换行 */
.preferred-payer .id.pull-right {
  position: absolute;
  right: 15px; /* 和Bootstrap list-group-item的默认左内边距保持一致 */
  top: 15px;
}

/* 让label占据左侧剩余所有空间 */
.preferred-payer .checkbox-inline {
  display: block;
  overflow: hidden;
}

/* 给名称添加截断样式 */
.preferred-payer .name {
  display: block;
  white-space: nowrap; /* 强制文本不换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 显示省略号 */
  margin-left: 5px; /* 保持和复选框的间距，还原原布局观感 */
}

为什么这样做？ #

• 原来的pull-right浮动布局会在label内容过长时，把ID挤到下一行，改用绝对定位可以让ID固定在列表项的右侧，不受左侧文本长度影响。
• 给列表项设置padding-right是为了确保ID不会和左侧文本重叠。
• 给span.name添加white-space: nowrap、overflow: hidden和text-overflow: ellipsis这三个属性是实现文本截断的必要条件，同时让label占据剩余空间，保证截断的宽度是可用的左侧空间。

完整效果的代码示例 #

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<style>
.my-list {
  width: 275px;
}

.preferred-payer.list-group-item {
  position: relative;
  padding-right: 60px;
}

.preferred-payer .id.pull-right {
  position: absolute;
  right: 15px;
  top: 15px;
}

.preferred-payer .checkbox-inline {
  display: block;
  overflow: hidden;
}

.preferred-payer .name {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 5px;
}
</style>
<ul class="list-group my-list">
  <li class="preferred-payer list-group-item">
    <label class="checkbox-inline">
      <input id="option-one" type="checkbox" name="select" value="60054">
      <span class="name">Item Name One</span>
    </label>
    <span class="id pull-right">60054</span>
  </li>
  <li class="preferred-payer list-group-item">
    <label class="checkbox-inline">
      <input id="option-one" type="checkbox" name="select" value="00562">
      <span class="name">Item Name Two</span>
    </label>
    <span class="id pull-right">00562</span>
  </li>
  <li class="preferred-payer list-group-item">
    <label class="checkbox-inline">
      <input id="option-one" type="checkbox" name="select" value="55026">
      <span class="name">A Really Long Item To Truncate </span>
    </label>
    <span class="id pull-right">55026</span>
  </li>
</ul>

这样调整后，长名称会在列表项的可用空间内自动截断并显示省略号，右侧的ID也会稳定地停留在右上角，不会出现换行的情况啦！

内容的提问来源于stack exchange，提问作者CXJ