When collapsing, the text adapts to the width of the sidebar progressively which causes a jumpy transition

I would like to know if there is any mechanism to show the text only when it fits 100% in the sidebar and it is not cut in two lines.

I need is the text to appear only after the transition of the collapse has finished.

What I've tried:

-Increasing/decreasing the transition time (too radical, works if I delete the transition but somehow has to be smooth so it's not a valid solution)

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

-Using backface-visibility property. Did not work.

-Using Bootstrap 5 event type shown.bs.collapse like this:

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

I've been looking for a similar question for a long time but I didn't find anything