2023年4月6日 19:00:40go评论67阅读模式

英文:

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

&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;

&lt;nav class=&quot;navbar navbar-expand-lg bg-body-tertiary&quot;&gt;
  &lt;div class=&quot;container-fluid&quot;&gt;
    &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;Navbar&lt;/a&gt;
    &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;
      &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarSupportedContent&quot;&gt;
      &lt;ul class=&quot;navbar-nav me-auto mb-2 mb-lg-0&quot;&gt;
        &lt;li class=&quot;nav-item&quot;&gt;
          &lt;a class=&quot;nav-link active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;Home&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&quot;nav-item&quot;&gt;
          &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Link&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&quot;nav-item dropdown&quot;&gt;
          &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;
            Dropdown
          &lt;/a&gt;
          &lt;ul class=&quot;dropdown-menu&quot;&gt;
            &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;
              &lt;hr class=&quot;dropdown-divider&quot;&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class=&quot;nav-item&quot;&gt;
          &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;
        &lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class=&quot;d-flex&quot; role=&quot;search&quot;&gt;
        &lt;input class=&quot;form-control me-2&quot; type=&quot;search&quot; placeholder=&quot;Search&quot; aria-label=&quot;Search&quot;&gt;
        &lt;button class=&quot;btn btn-outline-success&quot; type=&quot;submit&quot;&gt;Search&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/nav&gt;

&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;

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

First:

.flex-parent,
.flex-parent-parent,
.flex-parent-parent-parent {
  display: flex;
  padding: 10px;
  border: solid;
  min-width: 100px;
}

.flex-parent {
  min-width: 0;
}

.long-and-truncated {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

&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;

&lt;nav class=&quot;navbar navbar-expand-lg bg-body-tertiary&quot;&gt;
  &lt;div class=&quot;container-fluid&quot;&gt;
    &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;Navbar&lt;/a&gt;
    &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;
      &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarSupportedContent&quot;&gt;
      &lt;ul class=&quot;navbar-nav me-auto mb-2 mb-lg-0&quot;&gt;
        &lt;li class=&quot;nav-item&quot;&gt;
          &lt;a class=&quot;nav-link active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;Home&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&quot;nav-item&quot;&gt;
          &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Link&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&quot;nav-item dropdown&quot;&gt;
          &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;
            Dropdown
          &lt;/a&gt;
          &lt;ul class=&quot;dropdown-menu&quot;&gt;
            &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;
              &lt;hr class=&quot;dropdown-divider&quot;&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class=&quot;nav-item&quot;&gt;
          &lt;div class=&quot;flex-parent-parent-parent&quot;&gt;
            &lt;div class=&quot;flex-parent-parent&quot;&gt;
              &lt;div class=&quot;flex-parent&quot;&gt;
                &lt;div class=&quot;flex-child long-and-truncated&quot;&gt;
                  1. This is a loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong string that is OK to truncate please and thank you
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;

        &lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class=&quot;d-flex&quot; role=&quot;search&quot;&gt;
        &lt;button class=&quot;btn btn-outline-success&quot;&gt;Search&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/nav&gt;

&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;

Second:

.wrapper {
  display: flex;
  /*   width: 200px; */
  align-content: stretch;
  padding: 5px;
  min-width: 0;
  border: 1px solid
}

.wrapper .child2 {
  flex-grow: 1;
  overflow: hidden;
}

.flex {
  display: flex;
  min-width: 0;
}

.el {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.child1 {
  background: red;
}

.child2 {
  background: lightblue;
}

.child3 {
  background: green;
}

.wrapper&gt;* {
  padding: 5px;
}

&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; /&gt;

&lt;nav class=&quot;navbar navbar-expand-lg bg-body-tertiary&quot;&gt;
  &lt;div class=&quot;container-fluid&quot;&gt;
    &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;Navbar&lt;/a&gt;
    &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;
  &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
&lt;/button&gt;
    &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarSupportedContent&quot;&gt;
      &lt;ul class=&quot;navbar-nav me-auto mb-2 mb-lg-0&quot;&gt;
        &lt;li class=&quot;nav-item&quot;&gt;
          &lt;a class=&quot;nav-link active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;Home&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&quot;nav-item&quot;&gt;
          &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Link&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&quot;nav-item dropdown&quot;&gt;
          &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;
        Dropdown
      &lt;/a&gt;
          &lt;ul class=&quot;dropdown-menu&quot;&gt;
            &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;
              &lt;hr class=&quot;dropdown-divider&quot;&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class=&quot;nav-item&quot;&gt;

          &lt;div class=&quot;wrapper&quot;&gt;
            &lt;div class=&quot;child1&quot;&gt;child1&lt;/div&gt;
            &lt;div class=&quot;child2&quot;&gt;
              &lt;div class=&quot;flex&quot;&gt;
                &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;
                &lt;div&gt;a&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;child3&quot;&gt;child3&lt;/div&gt;
          &lt;/div&gt;

        &lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class=&quot;d-flex&quot; role=&quot;search&quot;&gt;
        &lt;button class=&quot;btn btn-outline-success&quot;&gt;Search&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/nav&gt;

&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;

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

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

.wrapper {
  display: grid;
  align-content: stretch;
  padding: 5px;
  min-width: 0;
  border: 1px solid;
}

英文:

Adding grid to wrapper class will work

.wrapper{
display: grid;
align-content: stretch;
padding: 5px;
min-width: 0;
border: 1px solid
}
</details>
# 答案2
**得分**: 0
这是你的解决方案，
注释的 CSS 在底部是我第一次尝试实现结果的，更简洁，但由于 Bootstrap 在较小设备上使用 flex-wrap 而不是更改 flex 方向，`overflow-x:hidden` 阻止了下拉导航项显示，所以注释的 CSS 防止了下拉导航栏项显示其内容。
然后，我通过对 CSS 行为进行一些调整，为我知道会溢出的项目指定了一些小宽度，并添加了一些媒体查询规则，解决方案运行良好，检查一下。
最后，我使溢出的文本在悬停时可滚动，同时隐藏其滚动条，因此可以通过滚动查看截断的文本，而不是完全无法访问。
``` js hide: false console: true babel: false -- 
<!-- language: lang-css -->
.container-fluid-custom{
width: 100vw;
}
.navbar-nav-custom {
flex: 1;
width: 0;
}
.nav-item-custom::-webkit-scrollbar {
display: none;
}
.nav-item-custom {
flex: 1;
width: 0;
}
.nav-item-custom:hover{
margin-right: 1rem;
overflow: auto;
-ms-overflow-style: none;  /* IE and Edge */
scrollbar-width: none; /*  Firefox */
}
.nav-item-custom:hover .text-truncate{
overflow: visible !important;
}
@media (max-width: 992px) {
.show {
width: 100%;
}
.navbar-nav {
width: 100%;
overflow-x: hidden;
}
.nav-item-custom {
width: 100%;
}
}
<!-- language: lang-html -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid container-fluid-custom">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navbar-collapse-custom" id="navbarSupportedContent">
<ul class="navbar-nav navbar-nav-custom me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item nav-item-custom">
<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>
</li>
</ul>
<div class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</div>
</div>
</div>
</nav>
<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>
<!-- end snippet -->
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.
/* .navbar-collapse-custom{
overflow-x: hidden;
}
.navbar-nav-custom{
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
.nav-item-custom{
overflow-x:hidden;
*/
<details>
<summary>英文:</summary>
Here&#39;s your solution, 
Notes: 
* 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. 
* 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.
* 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.  
&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;
&lt;!-- language: lang-css --&gt;
.container-fluid-custom{
width: 100vw;
}
.navbar-nav-custom {
flex: 1;
width: 0;
}
.nav-item-custom::-webkit-scrollbar {
display: none;
}
.nav-item-custom {
flex: 1;
width: 0;
}
.nav-item-custom:hover{
margin-right: 1rem;
overflow: auto;
-ms-overflow-style: none;  /* IE and Edge */
scrollbar-width: none; /*  Firefox */
}
.nav-item-custom:hover .text-truncate{
overflow: visible !important;
}
@media (max-width: 992px) {
.show {
width: 100%;
}
.navbar-nav {
width: 100%;
overflow-x: hidden;
}
.nav-item-custom {
width: 100%;
}
}
&lt;!-- language: lang-html --&gt;
&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;
&lt;nav class=&quot;navbar navbar-expand-lg bg-body-tertiary&quot;&gt;
&lt;div class=&quot;container-fluid container-fluid-custom&quot;&gt;
&lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;Navbar&lt;/a&gt;
&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;
&lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
&lt;/button&gt;
&lt;div class=&quot;collapse navbar-collapse navbar-collapse-custom&quot; id=&quot;navbarSupportedContent&quot;&gt;
&lt;ul class=&quot;navbar-nav navbar-nav-custom me-auto mb-2 mb-lg-0&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt;
&lt;a class=&quot;nav-link active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;Home&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt;
&lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Link&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;nav-item dropdown&quot;&gt;
&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;
Dropdown
&lt;/a&gt;
&lt;ul class=&quot;dropdown-menu&quot;&gt;
&lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;
&lt;hr class=&quot;dropdown-divider&quot;&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li class=&quot;nav-item nav-item-custom&quot;&gt;
&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;
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class=&quot;d-flex&quot; role=&quot;search&quot;&gt;
&lt;input class=&quot;form-control me-2&quot; type=&quot;search&quot; placeholder=&quot;Search&quot; aria-label=&quot;Search&quot;&gt;
&lt;button class=&quot;btn btn-outline-success&quot; type=&quot;submit&quot;&gt;Search&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/nav&gt;
&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;
&lt;!-- end snippet --&gt;
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.
/* .navbar-collapse-custom{
overflow-x: hidden;
}
.navbar-nav-custom{
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
.nav-item-custom{
overflow-x:hidden;
} */
**An advice:**
* 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. 
</details>
# 答案3
**得分**: 0
我不太明白你实际的问题，说实话，你一直通过添加更多嵌套元素或更多 flex 元素来改变问题范围。这里是你**第一**和**第二**个例子的修复。
```css
.expect-long {
min-width: 0;
}
.expect-long *:has(.long) {
min-width: 0;
display: flex;
}
.long {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nav-item:has(.long) {
display: flex;
align-items: center;
}
.wrapper {
display: flex;
}
.wrapper > * {
padding: 5px 15px;
}
.child1 {
background: red;
}
.child2 {
background: lightblue;
}
.child3 {
background: green;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse expect-long" id="navbarSupportedContent">
      <!-- ... (其余 HTML 代码) ... -->
    </div>
  </div>
</nav>

<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.

.expect-long {
min-width: 0;
}
.expect-long *:has(.long) {
min-width: 0;
display: flex;
}
.long {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nav-item:has(.long) {
display: flex;
align-items: center;
}
.navbar-collapse [role=&quot;search&quot;] {
flex-shrink: 0;
}
.wrapper {
display: flex;
}
.wrapper&gt;* {
padding: 5px 15px;
}
.child1 {
background: red;
}
.child2 {
background: lightblue;
}
.child3 {
background: green;
}

&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; /&gt;
&lt;nav class=&quot;navbar navbar-expand-lg bg-body-tertiary&quot;&gt;
&lt;div class=&quot;container-fluid&quot;&gt;
&lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;Navbar&lt;/a&gt;
&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;
&lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
&lt;/button&gt;
&lt;div class=&quot;collapse navbar-collapse expect-long&quot; id=&quot;navbarSupportedContent&quot;&gt;
&lt;ul class=&quot;navbar-nav me-auto mb-2 mb-lg-0&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt;
&lt;a class=&quot;nav-link active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;Home&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt;
&lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Link&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;nav-item dropdown&quot;&gt;
&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;
Dropdown
&lt;/a&gt;
&lt;ul class=&quot;dropdown-menu&quot;&gt;
&lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;hr class=&quot;dropdown-divider&quot;&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt;
&lt;div class=&quot;wrapper&quot;&gt;
&lt;div class=&quot;child1&quot;&gt;child1&lt;/div&gt;
&lt;div class=&quot;child2&quot;&gt;
&lt;div&gt;
&lt;div&gt;
&lt;div&gt;
&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;
&lt;/div&gt;
&lt;/div&gt;
&lt;div&gt;a&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;child3&quot;&gt;child3&lt;/div&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class=&quot;d-flex&quot; role=&quot;search&quot;&gt;
&lt;input class=&quot;form-control me-2&quot; type=&quot;search&quot; placeholder=&quot;Search&quot; aria-label=&quot;Search&quot;&gt;
&lt;button class=&quot;btn btn-outline-success&quot; type=&quot;submit&quot; onclick=&quot;changeItem()&quot;&gt;Change&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/nav&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

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

问题

答案1

如何在放大时防止网页的前半部出现白色边框？

在使用dompdf将PHP HTML表单转换为PDF时出现的错误消息。

阻止 HTML 表格在 Quarto 中使用整个页面宽度

显示按钮/容器当条件满足DOM操作时。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论