Bootstrap Ellipsis in list-group is resulting into overwritten rows - html

Question

Here is my code with ellipsis
<div class="list-group" id="NotificationList">
<a href="#" class="list-group-item">
<div class="checkbox">
<label>
<input type="checkbox">
</label>
</div>
<span class="">This is your first notification.</span>
<span class="badge">12:10 AM</span>
</a>
<a href="#" class="list-group-item">
<div class="checkbox">
<label>
<input type="checkbox">
</label>
</div>
<span class="notificat" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">This is your first notification. This is your first notification. This is your first notification. This is your first notification.
</span>
<span class="badge">12:10 AM</span>
</a>
<a href="#" class="list-group-item">
<div class="checkbox">
<label>
<input type="checkbox">
</label>
</div>
<span class="notificat" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">This is your first notification.</span>
<span class="badge">12:10 AM</span>
</a>
</div>
CSS :
.checkbox {
float: left;
}
.notificat {
max-width: 300px;
float: left;
}
Fiddle: https://jsfiddle.net/SimplytheVinay/fqfmh818/1/
Here is another one without ellipsis, which is working as per my expectation.
<div class="list-group" id="NotificationList">
<a href="#" class="list-group-item">
<div class="checkbox">
<label>
<input type="checkbox">
</label>
</div>
<span class="">This is your first notification.</span>
<span class="badge">12:10 AM</span>
</a>
<a href="#" class="list-group-item">
<div class="checkbox">
<label>
<input type="checkbox">
</label>
</div>
<span class="">This is your first notification.</span>
<span class="badge">12:10 AM</span>
</a>
<a href="#" class="list-group-item">
<div class="checkbox">
<label>
<input type="checkbox">
</label>
</div>
<span class="">This is your first notification.</span>
<span class="badge">12:10 AM</span>
</a>
<a href="#" class="list-group-item">
<div class="checkbox">
<label>
<input type="checkbox">
</label>
</div>
<span class="">This is your first notification.</span>
<span class="badge">12:10 AM</span>
</a>
</div>
CSS :
.checkbox {
float: left;
}
Fiddle : https://jsfiddle.net/SimplytheVinay/mp97gLjm/

Answer 1

Try changing display of notificat class to inline-block then there is no need to floating left.
.notificat {
max-width: 300px;
display: inline-block;
}
.checkbox {
float: left;
}
.notificat {
max-width: 300px;
display: inline-block;
}
.list-group-item{
padding: 9px 15px !important; /* adjust padding from 10px to 9px to keep same list view after adding Ellipsis */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="list-group" id="NotificationList">
<a data-toggle="modal" data-target="#notificationModal" class="list-group-item">
<div class="checkbox">
<label>
<input type="checkbox">
</label>
</div>
<span class="">This is your first notification.</span>
<span class="badge">12:10 AM</span>
</a>
<a data-toggle="popover" data-placement="top" data-content="This is your first notification." class="list-group-item">
<div class="checkbox">
<label>
<input type="checkbox">
</label>
</div>
<span class="notificat" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">This is your first notification. This is your first notification. This is your first notification. This is your first notification.
</span>
<span class="badge">12:10 AM</span>
</a>
<a href="#" class="list-group-item">
<div class="checkbox">
<label>
<input type="checkbox">
</label>
</div>
<span class="notificat" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">This is your first notification.</span>
<span class="badge">12:10 AM</span>
</a>
</div>

Answer 2

You can just remove " float: left; " this class " .notificat "
Remove this:
.notificat {
float: left;
}
See Updated Fiddle Demo