jquery - 将图标/文本折叠为左侧导航栏上的图标

Question

我有一个关于这个的 jsFiddle:

http://jsfiddle.net/nc5e2rtq/4/

HTML:

<input type="button" id="shrink" value="<" />
<div id="skaLeftNav">
    <ul>
        <li class="skaButton cf" nowrap="nowrap">
            <div class="skaImgWrap">
                img
            </div>
            <div class="skaTextWrap">My&nbsp;Dashboard&nbsp;Link1</div>
        </li>
        <li class="skaButton cf" nowrap="nowrap">
            <div class="skaImgWrap">
                img
            </div>
            <div class="skaTextWrap">My&nbsp;Dashboard&nbsp;Link2</div>
        </li>
    </ul>
</div>

这是 js，非常简单:

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

我最不确定的部分是 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;
    }

我遇到的唯一(也是明显的)问题是，随着左侧导航变窄，文本 block 会堆叠在图像 block 下方。顺便说一句，我只为

指定了 height:75px 这样你就可以看到发生了什么。

基本上，我正在努力寻找正确的显示类型和溢出类型(如果需要)。

Answer 1

非常简单:

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

演示 http://jsfiddle.net/nc5e2rtq/6/