Question

当容器的宽度随着过渡变为0时，我遇到了文字换行的问题。当容器的宽度从0开始变宽时，情况也是如此。我想删除此效果，并希望使文本停留在相同的位置而无需换行。这是我正在使用的代码：

<div class="container hidden-md hidden-lg" style="background:red">
            <div class=" flex-container">
                <h1 class="logo-box">
                    <a href="#">
                        <img class="logo-box__image" src="./images/logo.png" alt="The logo">
                    </a>
                </h1>
                <a href="#" class="bar" onclick="openSlide()">
                    <svg>
                        <path
                            d="M24 21v2c0 0.547-0.453 1-1 1h-22c-0.547 0-1-0.453-1-1v-2c0-0.547 0.453-1 1-1h22c0.547 0 1 0.453 1 1zM24 13v2c0
0.547-0.453 1-1 1h-22c-0.547 0-1-0.453-1-1v-2c0-0.547 0.453-1 1-1h22c0.547 0 1 0.453 1 1zM24 5v2c0 0.547-0.453 1-1 1h-22c-0.547 0-1-0.453-1-1v-2c0-0.547 0.453-1 1-1h22c0.547 0 1 0.453 1 1z">
                        </path>
                    </svg>
                </a>
            </div>
            <div class="nav-wrapper" id="mirzhal">
                <nav class="navigation">
                    <a href="javascript:void(0);" onclick="closeSlide()">&times;</a>
                    <ul>

这些链接被换行，当div时产生奇怪的效果 nav-wrapper类的宽度变为0，反之亦然

                        <li class="navigation__link"><a href="">About Sunnyvale</a></li>
                        <li class="navigation__link"><a href="">Gallery</a></li>
                        <li class="navigation__link"><a href="">Staff</a></li>
                        <li class="navigation__link"><a href="">Services</a></li>
                        <li class="navigation__link"><a href="">Contacts</a></li>
                    </ul>
                </nav>
            </div>
        </div>

JavaScript代码

 <script>
            function openSlide() {
                document.getElementById('mirzhal').style.width = "250px";
            }

            function closeSlide() {
                document.getElementById('mirzhal').style.width = '0';
            }
        </script>

当容器的宽度变窄时，文本会损坏

0 个答案: