рушится значок/текст только значок на левой навигационной панели

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; 
    } 

Единственная (и очевидная) проблема, с которой я столкнулся, заключается в том, что по мере того, как левая навигация сужается, текстовый блок стекивается под блоком изображения. BTW Я указал высоту: 75 пикселей для <li>, чтобы вы могли видеть, что происходит.

В основном я борюсь с правильным типом отображения и переполнением (при необходимости).

Answer 1

Очень просто:

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

Демоhttp://jsfiddle.net/nc5e2rtq/6/

Answer 2

Я думаю, что ответ Арбель абсолютно прав. Для документации вы также можете сделать что-то подобное в своей анимации.

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

Demo http://jsfiddle.net/ak5wvpfL/