I am currently facing an issue with the navigation on mobile view while using Bootstrap 4. Specifically, the .nav .dropdown-menu and .text-truncate classes are not displaying ellipsis when the content text length is too long.
I have attempted to resolve this by setting max-width: 100% to the .dropdown-menu so that children elements only expand to the maximum width of the parent.
View the screenshot of the actual issue here
Here is the code snippet:
<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>
<!-- I tried setting max-width: 100% to prevent children elements from expanding the parent, but it did 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>
<!-- I also tried setting max-width: 100% multiple times to no avail. :( -->
<span class="dropdown-item-text head-email" style="max-width:100%">
<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>
<!-- The text contains no spaces due to it being an email, which should be non-spaced. -->
</div>
</span>
</div>
</li>
</ul>
</div>
</nav>