Абзац переполнен в выпадающем списке Bootstrap

Question

Текст моего абзаца перекрывается, когда в нем слишком много слов.

Вот мой код:

<a class="dropdown-item content btnOpen">
<div class="col-sm-12">
    <div class="row">
        <div class="col-md-2 p-1">
            <img id="notif_image" class="notif_image" src="sample.jpg">
        </div>

        <div class="col-sm-10">
            <h6>This the the title</h6>
            <div style="max-width: 500px; display:inline-block">
                <p style="word-wrap: break-word;"><small>flex flex flex flex flex flex flex flex flex flex flex flex flex flex</small></p>
            </div>
            <p><small><em>this is a sample time</em></small></p>
        </div>
    </div>

</div></a>

И это вывод:

Answer 1

Вы пропустили самую важную часть вашего кода. Это Bootstrap -Dropdown.

Класс .dropdown-item получает white-space: nowrap;. Вот почему происходит переполнение. Вы должны переписать это поведение. Например, с пользовательским классом: .custom-dropdown-menu .dropdown-item { white-space: normal; }

.custom-dropdown-menu .dropdown-item {
  white-space: normal;
}

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="dropdown">

  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>

  <div class="dropdown-menu custom-dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item content btnOpen">
      <div class="col-sm-12">
        <div class="row">
          <div class="col-md-2 p-1">
            <img id="notif_image" class="notif_image" src="https://picsum.photos/id/30/48/48">
          </div>

          <div class="col-sm-10">
            <h6>This the the title</h6>
            <div>
              <p><small>flex flex flex flex flex flex flex flex flex flex flex flex flex flex  flex flex flex flex flex flex flex flex flex flex flex flex flex flex flex flex flex flex flex flex flex flex flex  flex flex flex flex flex flex flex flex flex</small></p>
            </div>
            <p><small><em>this is a sample time</em></small></p>
          </div>
        </div>

      </div>
    </a>

    <a class="dropdown-item content btnOpen">
      <div class="col-sm-12">
        <div class="row">
          <div class="col-md-2 p-1">
            <img id="notif_image" class="notif_image" src="https://picsum.photos/id/32/48/48">
          </div>

          <div class="col-sm-10">
            <h6>This the the title</h6>
            <div>
              <p><small>flex flex flex flex flex flex flex flex flex flex flex flex flex flex</small></p>
            </div>
            <p><small><em>this is a sample time</em></small></p>
          </div>
        </div>

      </div>
    </a>

  </div>
</div>