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中并将文本溢出/溢出应用于那个......运气不好。

Answer 1

我猜测在任何overflow规则开始行动之前，这些行会换行。您需要这样做以防止换行：

.nav__item {
    white-space: nowrap;
}

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

Answer 2

添加display：inline-block; *显示：内联; zoom：1;

允许nowrap工作。它在display：block;

上不起作用

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

2 个答案: