Усечение при x-переполнении внутри элемента списка

Question

Есть ли способ заставить text-overflow: ellipsis; работать с длинными именами (класс name) в моем списке, добавляя к этому CSS и HTML? Обратите внимание на то, как в прошлый раз идентификатор 55026 был уродливым ниже.

.my-list {
  width: 275px;
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />

<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>

Answer 1

Можно рассмотреть конфигурацию row / col, а затем добавить overflow:hidden для усечения текста:

.my-list {
  width: 275px;
  padding: 0 15px;
}

.my-list>.row {
  margin: 0;
}

label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />

<ul class="list-group my-list">
  <li class="preferred-payer list-group-item row ">
    <label class="checkbox-inline col-xs-9">
			<input id="option-one" type="checkbox" name="select" value="60054">
			<span class="name">Item Name One</span>
		</label>
    <span class="id pull-right col-xs-3">60054</span>
  </li>
  <li class="preferred-payer list-group-item row">
    <label class="checkbox-inline col-xs-9">
			<input id="option-one" type="checkbox" name="select" value="00562">
			<span class="name">Item Name Two</span>
		</label>
    <span class="id pull-right col-xs-3">00562</span>
  </li>
  <li class="preferred-payer list-group-item row">
    <label class="checkbox-inline col-xs-9">
			<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 col-xs-3">55026</span>
  </li>
</ul>