css - 为什么设置了 css max-width，但 div 仍然展开？

Question

我正在使用 bootstrap 4，当内容文本长度太长时，移动 View 上的导航 .nav .dropdown-menu 和 .text-truncate 出现问题，不能是省略号。

我已尝试将 max-width 100% 设置为 .dropdown-menu，以便子元素仅将最大宽度扩展到父宽度。

screenshot actualy happen

这里是代码

<nav class="navbar navbar-expand-sm navbar-dark bg-dark shadow fixed-top">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse-husr-navbar" aria-expanded="true">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse show" id="collapse-husr-navbar" style="">
      <ul class="navbar-nav" id="navbar-husr-right">
        <div class="d-block d-sm-flex">
          <div class="p-2 text-truncate">
            <span class="d-inline">
              <i class="fas fa-map-marker-alt"></i>
              <small><span id="husr-branch-name">DUMMY BRANCH A</span></small>
            </span>
          </div>
        </div>
        <li class="nav-item dropdown show">
          <a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="true">
            <span class="d-inline d-sm-none d-md-inline d-lg-inline">Menu</span>
          </a>
<!-- here the first I try to put max-width:100%; so children element can't push parent to expand, but not work. :( -->
          <div class="dropdown-menu dropdown-menu-right show" style="max-width:100%">
            <span class="dropdown-item-text text-nowrap" style="
">
              <i class="fas fa-user"></i>
              <span id="husr-user-name">Staff User</span>
              (<em><span id="husr-user-type">STAFF</span></em>)
            </span>

<!-- here the second I try to put max-width:100%; so children element can't push parent to expand, but also not work. :( -->
            <span class="dropdown-item-text head-email"  style="max-width:100%">
<!-- here the third time put max-width:100%; so children element can't push parent to expand, butthis also not work. :( -->
              <div class="text-truncate" style="max-width:100%">
                <i class="fas fa-envelope"></i>
                <span id="husr-user-username">i_mean_it_to_be_ellipsis_text_truncated_but_container_div_still_expanded</span>
<!-- yeah the text has no space because it contain an email that should be nospace -->
              </div>
            </span>
          </div>
        </li>
      </ul>
    </div>
  </nav>

screenshot expected

Answer 1

要使 text-overflow 正常工作，您需要一个 max-width 以及 overflow: hidden。您应该能够删除 text-truncate div 并使用此 CSS:

.head-email {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
}

来自MDN documentation for text-overflow :

The text-overflow property doesn't force an overflow to occur. To make text overflow its container you have to set other CSS properties: overflow and white-space.

编辑:
在您的情况下，576px 以下的 Bootstrap 不会限制导航栏本身的大小。添加一个 max-width: 100%; 在你的 div 类 navbar-collapse 修复较小的视口(viewport)尺寸。