截断 Twitter Bootstrap v5 导航栏内的文本

huangapple
go评论98阅读模式
英文:

Truncate text inside Twitter Bootstrap v5 Navbar

问题

如何在 Bootstrap 导航栏的 nav-link 或 nav-text 中截断动态文本（具有可变宽度）？

附注：使用显式宽度时，此代码正常工作，例如：<a class="nav-link disabled text-truncate" style="max-width: 150px;">，但宽度未知。

期望的行为是在桌面和移动视口上截断文本，无论视口大小如何。

Codepen

英文:

How to truncate dynamic text(with variable width) inside a nav-link or nav-text in a bootstrap navbar?

P.S.: With explicit width, this code just works fine, ex.: <a class="nav-link disabled text-truncate" style="max-width: 150px;"> but the width is unknown.

The expected behavior, is truncate text on desktop and mobile viewports, no matter which viewport size.

Codepen

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

  1. &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css&quot; integrity=&quot;sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65&quot; crossorigin=&quot;anonymous&quot;&gt;
  3. &lt;nav class=&quot;navbar navbar-expand-lg bg-body-tertiary&quot;&gt;
  4.   &lt;div class=&quot;container-fluid&quot;&gt;
  5.     &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;Navbar&lt;/a&gt;
  6.     &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#navbarSupportedContent&quot; aria-controls=&quot;navbarSupportedContent&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
  7.       &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
  8.     &lt;/button&gt;
  9.     &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarSupportedContent&quot;&gt;
  10.       &lt;ul class=&quot;navbar-nav me-auto mb-2 mb-lg-0&quot;&gt;
  11.         &lt;li class=&quot;nav-item&quot;&gt;
  12.           &lt;a class=&quot;nav-link active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;Home&lt;/a&gt;
  13.         &lt;/li&gt;
  14.         &lt;li class=&quot;nav-item&quot;&gt;
  15.           &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Link&lt;/a&gt;
  16.         &lt;/li&gt;
  17.         &lt;li class=&quot;nav-item dropdown&quot;&gt;
  18.           &lt;a class=&quot;nav-link dropdown-toggle&quot; href=&quot;#&quot; role=&quot;button&quot; data-bs-toggle=&quot;dropdown&quot; aria-expanded=&quot;false&quot;&gt;
  19.             Dropdown
  20.           &lt;/a&gt;
  21.           &lt;ul class=&quot;dropdown-menu&quot;&gt;
  22.             &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;&lt;/li&gt;
  23.             &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;
  24.             &lt;li&gt;
  25.               &lt;hr class=&quot;dropdown-divider&quot;&gt;
  26.             &lt;/li&gt;
  27.             &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;
  28.           &lt;/ul&gt;
  29.         &lt;/li&gt;
  30.         &lt;li class=&quot;nav-item&quot;&gt;
  31.           &lt;a class=&quot;nav-link disabled text-truncate&quot;&gt;long long long long long long long long long long long long long long long long long long long long long long long long long long long text&lt;/a&gt;
  32.         &lt;/li&gt;
  33.       &lt;/ul&gt;
  34.       &lt;div class=&quot;d-flex&quot; role=&quot;search&quot;&gt;
  35.         &lt;input class=&quot;form-control me-2&quot; type=&quot;search&quot; placeholder=&quot;Search&quot; aria-label=&quot;Search&quot;&gt;
  36.         &lt;button class=&quot;btn btn-outline-success&quot; type=&quot;submit&quot;&gt;Search&lt;/button&gt;
  37.       &lt;/div&gt;
  38.     &lt;/div&gt;
  39.   &lt;/div&gt;
  40. &lt;/nav&gt;
  42. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;

<!-- end snippet -->

I've tried @isherwood suggestions, but without success:

First:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .flex-parent,
  2. .flex-parent-parent,
  3. .flex-parent-parent-parent {
  4.   display: flex;
  5.   padding: 10px;
  6.   border: solid;
  7.   min-width: 100px;
  8. }
  10. .flex-parent {
  11.   min-width: 0;
  12. }
  14. .long-and-truncated {
  15.   flex: 1;
  16.   white-space: nowrap;
  17.   overflow: hidden;
  18.   text-overflow: ellipsis;
  19. }

<!-- language: lang-html -->

  1. &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css&quot; integrity=&quot;sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65&quot; crossorigin=&quot;anonymous&quot;&gt;
  3. &lt;nav class=&quot;navbar navbar-expand-lg bg-body-tertiary&quot;&gt;
  4.   &lt;div class=&quot;container-fluid&quot;&gt;
  5.     &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;Navbar&lt;/a&gt;
  6.     &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#navbarSupportedContent&quot; aria-controls=&quot;navbarSupportedContent&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
  7.       &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
  8.     &lt;/button&gt;
  9.     &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarSupportedContent&quot;&gt;
  10.       &lt;ul class=&quot;navbar-nav me-auto mb-2 mb-lg-0&quot;&gt;
  11.         &lt;li class=&quot;nav-item&quot;&gt;
  12.           &lt;a class=&quot;nav-link active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;Home&lt;/a&gt;
  13.         &lt;/li&gt;
  14.         &lt;li class=&quot;nav-item&quot;&gt;
  15.           &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Link&lt;/a&gt;
  16.         &lt;/li&gt;
  17.         &lt;li class=&quot;nav-item dropdown&quot;&gt;
  18.           &lt;a class=&quot;nav-link dropdown-toggle&quot; href=&quot;#&quot; role=&quot;button&quot; data-bs-toggle=&quot;dropdown&quot; aria-expanded=&quot;false&quot;&gt;
  19.             Dropdown
  20.           &lt;/a&gt;
  21.           &lt;ul class=&quot;dropdown-menu&quot;&gt;
  22.             &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;&lt;/li&gt;
  23.             &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;
  24.             &lt;li&gt;
  25.               &lt;hr class=&quot;dropdown-divider&quot;&gt;
  26.             &lt;/li&gt;
  27.             &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;
  28.           &lt;/ul&gt;
  29.         &lt;/li&gt;
  30.         &lt;li class=&quot;nav-item&quot;&gt;
  31.           &lt;div class=&quot;flex-parent-parent-parent&quot;&gt;
  32.             &lt;div class=&quot;flex-parent-parent&quot;&gt;
  33.               &lt;div class=&quot;flex-parent&quot;&gt;
  34.                 &lt;div class=&quot;flex-child long-and-truncated&quot;&gt;
  35.                   1. This is a loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong string that is OK to truncate please and thank you
  36.                 &lt;/div&gt;
  37.               &lt;/div&gt;
  38.             &lt;/div&gt;
  39.           &lt;/div&gt;
  41.         &lt;/li&gt;
  42.       &lt;/ul&gt;
  43.       &lt;div class=&quot;d-flex&quot; role=&quot;search&quot;&gt;
  44.         &lt;button class=&quot;btn btn-outline-success&quot;&gt;Search&lt;/button&gt;
  45.       &lt;/div&gt;
  46.     &lt;/div&gt;
  47.   &lt;/div&gt;
  48. &lt;/nav&gt;
  50. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;

<!-- end snippet -->

Second:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .wrapper {
  2.   display: flex;
  3.   /*   width: 200px; */
  4.   align-content: stretch;
  5.   padding: 5px;
  6.   min-width: 0;
  7.   border: 1px solid
  8. }
  10. .wrapper .child2 {
  11.   flex-grow: 1;
  12.   overflow: hidden;
  13. }
  15. .flex {
  16.   display: flex;
  17.   min-width: 0;
  18. }
  20. .el {
  21.   white-space: nowrap;
  22.   overflow: hidden;
  23.   text-overflow: ellipsis;
  24. }
  26. .child1 {
  27.   background: red;
  28. }
  30. .child2 {
  31.   background: lightblue;
  32. }
  34. .child3 {
  35.   background: green;
  36. }
  38. .wrapper&gt;* {
  39.   padding: 5px;
  40. }

<!-- language: lang-html -->

  1. &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; /&gt;
  3. &lt;nav class=&quot;navbar navbar-expand-lg bg-body-tertiary&quot;&gt;
  4.   &lt;div class=&quot;container-fluid&quot;&gt;
  5.     &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;Navbar&lt;/a&gt;
  6.     &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#navbarSupportedContent&quot; aria-controls=&quot;navbarSupportedContent&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
  7.   &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
  8. &lt;/button&gt;
  9.     &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarSupportedContent&quot;&gt;
  10.       &lt;ul class=&quot;navbar-nav me-auto mb-2 mb-lg-0&quot;&gt;
  11.         &lt;li class=&quot;nav-item&quot;&gt;
  12.           &lt;a class=&quot;nav-link active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;Home&lt;/a&gt;
  13.         &lt;/li&gt;
  14.         &lt;li class=&quot;nav-item&quot;&gt;
  15.           &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Link&lt;/a&gt;
  16.         &lt;/li&gt;
  17.         &lt;li class=&quot;nav-item dropdown&quot;&gt;
  18.           &lt;a class=&quot;nav-link dropdown-toggle&quot; href=&quot;#&quot; role=&quot;button&quot; data-bs-toggle=&quot;dropdown&quot; aria-expanded=&quot;false&quot;&gt;
  19.         Dropdown
  20.       &lt;/a&gt;
  21.           &lt;ul class=&quot;dropdown-menu&quot;&gt;
  22.             &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;&lt;/li&gt;
  23.             &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;
  24.             &lt;li&gt;
  25.               &lt;hr class=&quot;dropdown-divider&quot;&gt;
  26.             &lt;/li&gt;
  27.             &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;
  28.           &lt;/ul&gt;
  29.         &lt;/li&gt;
  30.         &lt;li class=&quot;nav-item&quot;&gt;
  32.           &lt;div class=&quot;wrapper&quot;&gt;
  33.             &lt;div class=&quot;child1&quot;&gt;child1&lt;/div&gt;
  34.             &lt;div class=&quot;child2&quot;&gt;
  35.               &lt;div class=&quot;flex&quot;&gt;
  36.                 &lt;div class=&quot;el&quot;&gt;long long long long long long long long long long long long long long long long long long long long text&lt;/div&gt;
  37.                 &lt;div&gt;a&lt;/div&gt;
  38.               &lt;/div&gt;
  39.             &lt;/div&gt;
  40.             &lt;div class=&quot;child3&quot;&gt;child3&lt;/div&gt;
  41.           &lt;/div&gt;
  43.         &lt;/li&gt;
  44.       &lt;/ul&gt;
  45.       &lt;div class=&quot;d-flex&quot; role=&quot;search&quot;&gt;
  46.         &lt;button class=&quot;btn btn-outline-success&quot;&gt;Search&lt;/button&gt;
  47.       &lt;/div&gt;
  48.     &lt;/div&gt;
  49.   &lt;/div&gt;
  50. &lt;/nav&gt;
  52. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;

<!-- end snippet -->

Both(apparently) need a explicit width to truncate text.
My text come from API, and have no length restriction, that cause in a layout mess.

答案1

得分: 1

将网格添加到包装类将起作用。

  1. .wrapper {
  2.   display: grid;
  3.   align-content: stretch;
  4.   padding: 5px;
  5.   min-width: 0;
  6.   border: 1px solid;
  7. }
英文:

Adding grid to wrapper class will work

  1. .wrapper{
  2. display: grid;
  3. align-content: stretch;
  4. padding: 5px;
  5. min-width: 0;
  6. border: 1px solid
  7. }
  8. </details>
  9. # 答案2
  10. **得分**: 0
  11. 这是你的解决方案，
  12. 注释的 CSS 在底部是我第一次尝试实现结果的，更简洁，但由于 Bootstrap 在较小设备上使用 flex-wrap 而不是更改 flex 方向，`overflow-x:hidden` 阻止了下拉导航项显示，所以注释的 CSS 防止了下拉导航栏项显示其内容。
  13. 然后，我通过对 CSS 行为进行一些调整，为我知道会溢出的项目指定了一些小宽度，并添加了一些媒体查询规则，解决方案运行良好，检查一下。
  14. 最后，我使溢出的文本在悬停时可滚动，同时隐藏其滚动条，因此可以通过滚动查看截断的文本，而不是完全无法访问。
  15. ``` js hide: false console: true babel: false -- 
  16. <!-- language: lang-css -->
  17. .container-fluid-custom{
  18. width: 100vw;
  19. }
  20. .navbar-nav-custom {
  21. flex: 1;
  22. width: 0;
  23. }
  24. .nav-item-custom::-webkit-scrollbar {
  25. display: none;
  26. }
  27. .nav-item-custom {
  28. flex: 1;
  29. width: 0;
  30. }
  31. .nav-item-custom:hover{
  32. margin-right: 1rem;
  33. overflow: auto;
  34. -ms-overflow-style: none;  /* IE and Edge */
  35. scrollbar-width: none; /*  Firefox */
  36. }
  37. .nav-item-custom:hover .text-truncate{
  38. overflow: visible !important;
  39. }
  40. @media (max-width: 992px) {
  41. .show {
  42. width: 100%;
  43. }
  44. .navbar-nav {
  45. width: 100%;
  46. overflow-x: hidden;
  47. }
  48. .nav-item-custom {
  49. width: 100%;
  50. }
  51. }
  52. <!-- language: lang-html -->
  53. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  54. <nav class="navbar navbar-expand-lg bg-body-tertiary">
  55. <div class="container-fluid container-fluid-custom">
  56. <a class="navbar-brand" href="#">Navbar</a>
  57. <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  58. <span class="navbar-toggler-icon"></span>
  59. </button>
  60. <div class="collapse navbar-collapse navbar-collapse-custom" id="navbarSupportedContent">
  61. <ul class="navbar-nav navbar-nav-custom me-auto mb-2 mb-lg-0">
  62. <li class="nav-item">
  63. <a class="nav-link active" aria-current="page" href="#">Home</a>
  64. </li>
  65. <li class="nav-item">
  66. <a class="nav-link" href="#">Link</a>
  67. </li>
  68. <li class="nav-item dropdown">
  69. <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
  70. Dropdown
  71. </a>
  72. <ul class="dropdown-menu">
  73. <li><a class="dropdown-item" href="#">Action</a></li>
  74. <li><a class="dropdown-item" href="#">Another action</a></li>
  75. <li>
  76. <hr class="dropdown-divider">
  77. </li>
  78. <li><a class="dropdown-item" href="#">Something else here</a></li>
  79. </ul>
  80. </li>
  81. <li class="nav-item nav-item-custom">
  82. <a class="nav-link disabled text-truncate">long long long long long long long long long long long long long long long long long long long long long long long long long long long text</a>
  83. </li>
  84. </ul>
  85. <div class="d-flex" role="search">
  86. <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
  87. <button class="btn btn-outline-success" type="submit">Search</button>
  88. </div>
  89. </div>
  90. </div>
  91. </nav>
  92. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
  93. <!-- end snippet -->
  94. commented CSS of first trial, where dropdown item got hidden by `overflow-x: hidden`. This isn't the solution, but for reference, if you want to try it and maybe come out with another solution.
  95. /* .navbar-collapse-custom{
  96. overflow-x: hidden;
  97. }
  98. .navbar-nav-custom{
  99. white-space: nowrap;
  100. overflow-x: hidden;
  101. text-overflow: ellipsis;
  102. }
  103. .nav-item-custom{
  104. overflow-x:hidden;
  105. */
  106. <details>
  107. <summary>英文:</summary>
  108. Here&#39;s your solution, 
  109. Notes: 
  110. * The commented css at the bottom was my first attempt to achieve the result and was more concise it achieved it, but as bootstrap uses flex-wrap on smaller devices rather than changing flex direction, the `overflow-x:hidden` prevented the dropdown to show, so commented css prevent dropdown navbar item from showing its content. 
  111. * Then I modified the solution by coming with some tweaks for the css behavior by specifying some small widths for items that I know would overflow and adding some media query rules and the solution is working fine, check it.
  112. * Finally, I made the text that overflows scrollabe when hovering over it while hiding its scrollbars, so truncated text can be scrolled through and seen entirely rather than being totally inaccessible.  
  113. &lt;!-- begin snippet: js hide: false console: true babel: false --&gt;
  114. &lt;!-- language: lang-css --&gt;
  115. .container-fluid-custom{
  116. width: 100vw;
  117. }
  118. .navbar-nav-custom {
  119. flex: 1;
  120. width: 0;
  121. }
  122. .nav-item-custom::-webkit-scrollbar {
  123. display: none;
  124. }
  125. .nav-item-custom {
  126. flex: 1;
  127. width: 0;
  128. }
  129. .nav-item-custom:hover{
  130. margin-right: 1rem;
  131. overflow: auto;
  132. -ms-overflow-style: none;  /* IE and Edge */
  133. scrollbar-width: none; /*  Firefox */
  134. }
  135. .nav-item-custom:hover .text-truncate{
  136. overflow: visible !important;
  137. }
  138. @media (max-width: 992px) {
  139. .show {
  140. width: 100%;
  141. }
  142. .navbar-nav {
  143. width: 100%;
  144. overflow-x: hidden;
  145. }
  146. .nav-item-custom {
  147. width: 100%;
  148. }
  149. }
  150. &lt;!-- language: lang-html --&gt;
  151. &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css&quot; integrity=&quot;sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65&quot; crossorigin=&quot;anonymous&quot;&gt;
  152. &lt;nav class=&quot;navbar navbar-expand-lg bg-body-tertiary&quot;&gt;
  153. &lt;div class=&quot;container-fluid container-fluid-custom&quot;&gt;
  154. &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;Navbar&lt;/a&gt;
  155. &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#navbarSupportedContent&quot; aria-controls=&quot;navbarSupportedContent&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
  156. &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
  157. &lt;/button&gt;
  158. &lt;div class=&quot;collapse navbar-collapse navbar-collapse-custom&quot; id=&quot;navbarSupportedContent&quot;&gt;
  159. &lt;ul class=&quot;navbar-nav navbar-nav-custom me-auto mb-2 mb-lg-0&quot;&gt;
  160. &lt;li class=&quot;nav-item&quot;&gt;
  161. &lt;a class=&quot;nav-link active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;Home&lt;/a&gt;
  162. &lt;/li&gt;
  163. &lt;li class=&quot;nav-item&quot;&gt;
  164. &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Link&lt;/a&gt;
  165. &lt;/li&gt;
  166. &lt;li class=&quot;nav-item dropdown&quot;&gt;
  167. &lt;a class=&quot;nav-link dropdown-toggle&quot; href=&quot;#&quot; role=&quot;button&quot; data-bs-toggle=&quot;dropdown&quot; aria-expanded=&quot;false&quot;&gt;
  168. Dropdown
  169. &lt;/a&gt;
  170. &lt;ul class=&quot;dropdown-menu&quot;&gt;
  171. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;&lt;/li&gt;
  172. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;
  173. &lt;li&gt;
  174. &lt;hr class=&quot;dropdown-divider&quot;&gt;
  175. &lt;/li&gt;
  176. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;
  177. &lt;/ul&gt;
  178. &lt;/li&gt;
  179. &lt;li class=&quot;nav-item nav-item-custom&quot;&gt;
  180. &lt;a class=&quot;nav-link disabled text-truncate&quot;&gt;long long long long long long long long long long long long long long long long long long long long long long long long long long long text&lt;/a&gt;
  181. &lt;/li&gt;
  182. &lt;/ul&gt;
  183. &lt;div class=&quot;d-flex&quot; role=&quot;search&quot;&gt;
  184. &lt;input class=&quot;form-control me-2&quot; type=&quot;search&quot; placeholder=&quot;Search&quot; aria-label=&quot;Search&quot;&gt;
  185. &lt;button class=&quot;btn btn-outline-success&quot; type=&quot;submit&quot;&gt;Search&lt;/button&gt;
  186. &lt;/div&gt;
  187. &lt;/div&gt;
  188. &lt;/div&gt;
  189. &lt;/nav&gt;
  190. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  191. &lt;!-- end snippet --&gt;
  192. commented CSS of first trial, where dropdown item got hidden by `overflow-x: hidden`. This isn&#39;t the solution, but for reference, if you want to try it and maybe come out with another solution.
  193. /* .navbar-collapse-custom{
  194. overflow-x: hidden;
  195. }
  196. .navbar-nav-custom{
  197. white-space: nowrap;
  198. overflow-x: hidden;
  199. text-overflow: ellipsis;
  200. }
  201. .nav-item-custom{
  202. overflow-x:hidden;
  203. } */
  204. **An advice:**
  205. * with your progression on front end development, you would see custom made libraries such as bootstrap hinders your freedom of implementation, that&#39;s why in some cases you should create your own UI components from scratch fully customized to your own purpose. 
  206. </details>
  207. # 答案3
  208. **得分**: 0
  209. 我不太明白你实际的问题，说实话，你一直通过添加更多嵌套元素或更多 flex 元素来改变问题范围。这里是你**第一**和**第二**个例子的修复。
  210. ```css
  211. .expect-long {
  212. min-width: 0;
  213. }
  214. .expect-long *:has(.long) {
  215. min-width: 0;
  216. display: flex;
  217. }
  218. .long {
  219. white-space: nowrap;
  220. overflow: hidden;
  221. text-overflow: ellipsis;
  222. }
  223. .nav-item:has(.long) {
  224. display: flex;
  225. align-items: center;
  226. }
  227. .wrapper {
  228. display: flex;
  229. }
  230. .wrapper > * {
  231. padding: 5px 15px;
  232. }
  233. .child1 {
  234. background: red;
  235. }
  236. .child2 {
  237. background: lightblue;
  238. }
  239. .child3 {
  240. background: green;
  241. }
  1. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
  3. <nav class="navbar navbar-expand-lg bg-body-tertiary">
  4.   <div class="container-fluid">
  5.     <a class="navbar-brand" href="#">Navbar</a>
  6.     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  7.       <span class="navbar-toggler-icon"></span>
  8.     </button>
  9.     <div class="collapse navbar-collapse expect-long" id="navbarSupportedContent">
  10.       <!-- ... (其余 HTML 代码) ... -->
  11.     </div>
  12.   </div>
  13. </nav>
  15. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
英文:

I don't get your actual problem to be honest, you keep changing the problem scope by adding more nested elements or more flex elements. Here is a fix for your First and Second examples.

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-css -->

  1. .expect-long {
  2. min-width: 0;
  3. }
  4. .expect-long *:has(.long) {
  5. min-width: 0;
  6. display: flex;
  7. }
  8. .long {
  9. white-space: nowrap;
  10. overflow: hidden;
  11. text-overflow: ellipsis;
  12. }
  13. .nav-item:has(.long) {
  14. display: flex;
  15. align-items: center;
  16. }
  17. .navbar-collapse [role=&quot;search&quot;] {
  18. flex-shrink: 0;
  19. }
  20. .wrapper {
  21. display: flex;
  22. }
  23. .wrapper&gt;* {
  24. padding: 5px 15px;
  25. }
  26. .child1 {
  27. background: red;
  28. }
  29. .child2 {
  30. background: lightblue;
  31. }
  32. .child3 {
  33. background: green;
  34. }

<!-- language: lang-html -->

  1. &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; /&gt;
  2. &lt;nav class=&quot;navbar navbar-expand-lg bg-body-tertiary&quot;&gt;
  3. &lt;div class=&quot;container-fluid&quot;&gt;
  4. &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;Navbar&lt;/a&gt;
  5. &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#navbarSupportedContent&quot; aria-controls=&quot;navbarSupportedContent&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
  6. &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
  7. &lt;/button&gt;
  8. &lt;div class=&quot;collapse navbar-collapse expect-long&quot; id=&quot;navbarSupportedContent&quot;&gt;
  9. &lt;ul class=&quot;navbar-nav me-auto mb-2 mb-lg-0&quot;&gt;
  10. &lt;li class=&quot;nav-item&quot;&gt;
  11. &lt;a class=&quot;nav-link active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;Home&lt;/a&gt;
  12. &lt;/li&gt;
  13. &lt;li class=&quot;nav-item&quot;&gt;
  14. &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Link&lt;/a&gt;
  15. &lt;/li&gt;
  16. &lt;li class=&quot;nav-item dropdown&quot;&gt;
  17. &lt;a class=&quot;nav-link dropdown-toggle&quot; href=&quot;#&quot; role=&quot;button&quot; data-bs-toggle=&quot;dropdown&quot; aria-expanded=&quot;false&quot;&gt;
  18. Dropdown
  19. &lt;/a&gt;
  20. &lt;ul class=&quot;dropdown-menu&quot;&gt;
  21. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;&lt;/li&gt;
  22. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;
  23. &lt;li&gt;&lt;hr class=&quot;dropdown-divider&quot;&gt;&lt;/li&gt;
  24. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;
  25. &lt;/ul&gt;
  26. &lt;/li&gt;
  27. &lt;li class=&quot;nav-item&quot;&gt;
  28. &lt;div class=&quot;wrapper&quot;&gt;
  29. &lt;div class=&quot;child1&quot;&gt;child1&lt;/div&gt;
  30. &lt;div class=&quot;child2&quot;&gt;
  31. &lt;div&gt;
  32. &lt;div&gt;
  33. &lt;div&gt;
  34. &lt;div class=&quot;long&quot;&gt;long long long long long long long long long long long long long long long long long long long long text&lt;/div&gt;
  35. &lt;/div&gt;
  36. &lt;/div&gt;
  37. &lt;div&gt;a&lt;/div&gt;
  38. &lt;/div&gt;
  39. &lt;/div&gt;
  40. &lt;div class=&quot;child3&quot;&gt;child3&lt;/div&gt;
  41. &lt;/div&gt;
  42. &lt;/li&gt;
  43. &lt;/ul&gt;
  44. &lt;div class=&quot;d-flex&quot; role=&quot;search&quot;&gt;
  45. &lt;input class=&quot;form-control me-2&quot; type=&quot;search&quot; placeholder=&quot;Search&quot; aria-label=&quot;Search&quot;&gt;
  46. &lt;button class=&quot;btn btn-outline-success&quot; type=&quot;submit&quot; onclick=&quot;changeItem()&quot;&gt;Change&lt;/button&gt;
  47. &lt;/div&gt;
  48. &lt;/div&gt;
  49. &lt;/div&gt;
  50. &lt;/nav&gt;
  51. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年4月6日 19:00:40
  • 转载请务必保留本文链接：https://go.coder-hub.com/75948744.html
  • css
  • flexbox
  • html
  • twitter-bootstrap
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定