Jquery 将图标/文本折叠为左侧导航上的图标

我对这件事有点怀疑：

HTML:

我最不确定的是CSS：

#skaLeftNav{
    width:190px;
    overflow-x:hidden;
    }
#skaLeftNav ul{
    margin:0px;
    padding:0px;
    list-style:none;
    border:1px solid #aaa;
    border-left:none;
    }
.skaButton{
    overflow-x:hidden;
    height:70px;
    }
.skaImgWrap{
    display:inline-block;
    border:1px solid gray;
    width:32px;
    height:32px;
    }
.skaTextWrap{
    display:inline-block;
    margin-left:5px;
    border:1px solid #ddd;
    }

我遇到的唯一（也是明显的）问题是，随着左侧导航的变窄，文本块堆叠在图像块下。顺便说一句，我为

指定了高度：75px，这样你才能看到发生了什么

基本上，我正在努力使用正确的显示类型和溢出类型（如果需要）。

非常简单：

.skaButton {
    overflow-x:hidden;
    white-space: nowrap; /* <- add this */
}

.skaButton{
溢出x：隐藏；
空白：nowrap；/*我认为Arbel的答案绝对正确。仅用于文档，您也可以在动画中执行类似操作

$(document).ready(function(){
    $('#shrink').click(function(){
        setTimeout($('#skaLeftNav').animate({width:50},2000),2000);
        $('.skaTextWrap').animate({width:-5, opacity: 0},2000);
    });
});

演示

.skaButton {
    overflow-x:hidden;
    white-space: nowrap; /* <- add this */
}

$(document).ready(function(){
    $('#shrink').click(function(){
        setTimeout($('#skaLeftNav').animate({width:50},2000),2000);
        $('.skaTextWrap').animate({width:-5, opacity: 0},2000);
    });
});