Bootstrap Многоточие в списке-группы в результате в перезаписаны строк

Question

Вот мой код с многоточием

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

Вот еще один не многоточие, который работает в соответствии с моим ожиданием.

<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

Попробуйте изменить отображение notificat класса на inline-block, тогда нет необходимости плавать влево.

.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

Вы можете просто удалить "Поплавок: левый," этот класс ".notificat"

Удалить это:

.notificat { 
    float: left; 
} 

См. Updated Fiddle Demo