在切換過渡運行時，側邊欄中的跳躍 CSS 過渡鏈接文本

Question

折疊時，文本逐漸適應側邊欄的寬度，這會導致跳躍的過渡

例子：

如您所見，文本Collapse sidebar出現在兩行而不是單行文本中，並且文本 Stackoverflow 出現得太早，無法完全顯示。

期望的結果：

現場 JS 小提琴

我想知道是否有任何機制僅在側邊欄中適合 100% 且未分成兩行時才顯示文本。

我需要的是只有在折疊過渡完成后才會出現的文本。

我試過的：

- 增加/減少過渡時間（太激進了，如果我刪除過渡就可以了，但不知何故必須平滑，所以這不是一個有效的解決方案）

.sidebar{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 290px;
    background: #193D4C;
    z-index: 100;
    transition: all 0.5s ease;
}

- 使用backface-visibility屬性。 不工作。

- 使用 Bootstrap 5 事件類型shown.bs.collapse像這樣：

var myCollapsible = document.getElementById('sidebar')
myCollapsible.addEventListener('shown.bs.collapse', function () {
  alert("it works!"); //This never gets fired
})

我一直在尋找類似的問題，但我沒有找到任何東西

Answer 1

將以下 CSS class 添加到文本元素：

.dont-break {
  min-width: 100%;
  white-space: nowrap;
  overflow: hidden;
}

例如https://jsfiddle.net/Lnqpcijm/5/