javascript - 使用 jquery animate 时停止换行

Question

我设置了这个 fiddle :https://jsfiddle.net/xwb9594m/

如您所见，当关闭滑动菜单时，内容会随着菜单缩小而换行。我正在尝试让它干净地滑离屏幕的一侧。

这是我的 JS:

$(document).ready(function() {

      var menuBtn = $('.video-search-button'),
             menu = $('.video-search-menu'),
            close = $('.video-search-menu .close');

      menuBtn.click(function(){
          menu.animate({width: 'toggle'});
      });

      close.click(function(){
         menu.animate({width: 'toggle'});
      });

});

和我的 SCSS:

.video-search-menu {
display: none;
position: fixed;
top: 0;
right: 0;
width: auto;
height: 100%;
overflow: hidden;
background: #24637e;
background: rgba(36, 99, 126, 0.9);
color: #fff;
z-index: 101;

&-wrapper {
    position: relative;
    padding: 180px 50px 0 50px;
}

.close {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 15px;
    left: 15px;
    z-index: 9999;
    cursor: pointer;

    &:before, &:after {
        content: '';
        position: absolute;
        width: 100%;
        top: 50%;
        height: 2px;
        background: #ffffff;
        transform: rotate(45deg);
    }

    &:after {
        transform: rotate(-45deg);
    }
}
}

Answer 1

添加 CSS 规则

p{
    overflow: hidden;
    white-space: nowrap;
}