Truncate on x-overflow inside list item - html

Question

Is there a way to make the nice text-overflow: ellipsis; work on long names (class name) in my list, adding to this CSS & HTML? Note how the 55026 ID is wrapped below in an ugly fashion on the last time.
.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

You can consider a row/col configuration then add overflow:hidden to truncate the text:
.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>