nowrap text

index.html

<div class="nobreak">
  TEXTO COMPRIDO
</div>
<ul class="menu">
  <li><span class='icon'>icon</span>
    <span class='text'>text menu</span></li>
  <li><span class='icon'>icon</span>
    <span class='text'>text menu</span></li>
  <li><span class='icon'>icon</span>
    <span class='text'>text menu</span></li>
</ul>

nowrap-text.markdown

nowrap text

A Pen by João Ramos on CodePen.

License.

style.sass

@import "bourbon"
body
  padding: 100px

ul
  list-style: none
  padding: 0
  
  .icon
    background-color: green
    display: inline-block
    
  .text
    background-color: yellow
    display: inline-block
    width: 10px
    overflow: hidden
    white-space: nowrap

    
.nobreak
  background-color: red
  white-space: nowrap
  width: 40px - 10px
  overflow: hidden
  @include transition (all 0.1s ease-in)
  
  &:hover
    width: 100px
    @include transition (all 0.3s ease-out)
  
.menu
  width: 138px
  background-color: red
  
  &:hover
    width: 200px
    @include transition (all 1s ease-out)
    
    .text
      width: 100px
      @include transition (all 1s ease-out)