Having problems getting text-overflow and overflow: hidden to work

Question

I am having problems getting text-overflow to work. I also cant get normal overflow:hidden to work either. Any ideas or suggestions?

Here is the css code without either. (Please note it is written in OOCSS / BEM syntax).

/*  Base
    =====================================================*/

    /*  Nav
        =================================================*/

        /*  B
            ---------------------------------------------*/

            .nav
            {
                margin-bottom:          24px;

                margin-left:            0;

                padding-left:           0;

                list-style:             none;
            }

        /*  E
            ---------------------------------------------*/

            .nav__item
            {
                float:                  left;

                position:               relative;
            }

            .nav__link
            {
                display:                block;

                color:                  inherit;

                text-decoration:        none;
            }

and the HTML

<ul class="pivot nav" style="font-size:24px">

<li class="nav__item nav__item--active">

  <a class="nav__link" href="#">

    List Item 1

  </a>


</li>

<li class="nav__item">

  <a class="nav__link" href="#">

    List Item 2

  </a>

</li>

<li class="nav__item">

  <a class="nav__link" href="#">

    List Item 3

  </a>

</li>
  </ul>

I also tried wrapping it in a parent div and applies text-overflow / overflow to that..no luck.

Answer 1

adding display: inline-block; *display: inline; zoom: 1;

allows nowrap to work. It does not work on display:block;

Answer 2

I'm guessing that the lines wrap before any overflow rule kicks into action. You will need to do this to prevent line breaks:

.nav__item {
    white-space: nowrap;
}

I'm not sure which element you want to hide the overflow on, so I created this fiddle: http://jsfiddle.net/bACQD/. Feel free to modify it to clear up any confusions.