将<p>限制为一行并在必要时进行椭圆化处理？

Question

我有这个:

<ul>
  <li>
    <p>Some long text here</p>
  </li>
</ul>

有没有办法让p文本被限制在一行,并且如果它比父容器更宽,那么它是否有椭圆形？

谢谢

Answer 1

您可以使用CSS 将文本限制为一行.

<p style="white-space: nowrap;"></p>

编辑: 根据quirksmode显然有一个text-overflow: ellipsis.我从来没有用过这个,也没有真正了解它,但你应该调查一下.

Answer 2

CSS有white-space: nowrap(给你单行),text-overflow: ellipsis它应该完全符合你的要求.不幸的是,text-overflow: ellipsis所有浏览器都不支持(在这种情况下Firefox是例外).

Devon Govett 为jQuery编写了一个省略号插件,解决了这个问题.

原始博客:文本溢出:自原始博客被删除以来,通过Wayback Machine 通过jQuery为Firefox省略.

Answer 3

在您的段落中使用此 CSS 类。

.single-line{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inherit;
}

Answer 4

这正是您正在寻找的。它是一个 jQuery 插件。添加此插件后，您所要做的就是将其包装在像这样的 div 中。它会根据您指定的文本大小自动换行。

<ul>
  <li>
    <div class="expandable">
        <p>Some long text here</p>
    </div>
  </li>
</ul>