html - 列表组中的 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>