Есть ли способ заставить 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>