遇到文本溢出和溢出问题：隐藏工作

Question

我在让文本溢出工作时遇到问题。我也无法正常溢出：隐藏工作。有什么想法或建议吗？

这是没有任何一个的 css 代码。 （请注意它是用 OOCSS / BEM 语法编写的）。

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

和 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>

我还尝试将其包装在父 div 中并将 text-overflow / overflow 应用于那个......没有运气。

Answer 1

我猜这些行在任何overflow 规则生效之前都会换行。您需要这样做以防止换行：

.nav__item {
    white-space: nowrap;
}

我不确定你想在哪个元素上隐藏溢出，所以我创建了这个小提琴：http://jsfiddle.net/bACQD/。随意修改它以消除任何混淆。

Answer 2

添加显示：内联块； *显示：内联；缩放：1；

允许 nowrap 工作。它不适用于 display:block;