Skip to content

Instantly share code, notes, and snippets.

@shirohana
Last active February 5, 2017 14:39
Show Gist options
  • Save shirohana/40a2c594b148a468081f to your computer and use it in GitHub Desktop.
Save shirohana/40a2c594b148a468081f to your computer and use it in GitHub Desktop.
Bootstrap list-group in oneline with badge
.ellipsis {
display: -webkit-flex;
display: flex;
}
.ellipsis .ellipsis-item {
-webkit-flex: 1;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ellipsis .badge {
margin: 1px 0 1px 4px;
}
https://jsfiddle.net/L8zpo14j/1/
<p>Example</p>
<div class="panel panel-info">
<div class="panel-heading">One Line List Item</div>
<ul class="list-group">
<li class="list-group-item ellipsis">
<span class="ellipsis-item">A-long-long-long-long-long-long-long-long-long-long-text</span>
<span class="badge">badge</span>
</li>
<li class="list-group-item ellipsis">
<span class="ellipsis-item">A-long-long-long-long-long-long-long-long-long-long-text</span>
<span class="badge">badge</span>
</li>
</ul>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment