在切换转换运行时，侧边栏中的跳跃 CSS 转换链接文本[关闭]

Question

折叠时，文本会逐渐适应侧边栏的宽度，从而导致跳跃过渡

例子：

如您所见，文本 Collapse sidebar 出现在两行而不是单行文本中，并且文本 Stackoverflow 出现得太早，无法完全显示。

想要的结果：

LIVE JS FIDDLE

我想知道是否有任何机制仅在侧边栏中适合 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 类添加到文本元素：

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

示例https://jsfiddle.net/Lnqpcujm/5/