javascript - 如何在此 html 标记中通过 css 显示省略号

Question

对于掌握 css 的人，我有一个非常小的问题。我有以下标记：

<li>
 <div>
  <span>Some text</span>
  <span>Some large amount of text</span>
 </div>
<li>

而CSS是：

li
{
  width: 150px;
  height: 100px;
}

现在我想在包含大量文本的第二个跨度内显示省略号。我怎样才能做到这一点 ？

有人可以帮我吗？

Answer 1

不知道为什么你向我们展示了你是如何设计lis 的，但是……</p>

<style>
li > span:nth-child(2):before {
    content: '\2026\0020';
}
</style>
<li>
    <span>Some text</span>
    <span>Some large amount of text</span>
</li>

在 Unicode 中，U+2026 是水平省略号，U+0020 是空格。

演示：http: //jsfiddle.net/5xWhx/

Answer 2

如果您只有一个衬垫跨度，您所需要的就是这个。不需要伪元素

li span:nth-child(2) {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

根据 caniuse.com 所有浏览器都支持这一点。

Answer 3

假设您的结构总是像您标记的那样（如果没有，您可以使用类 - 无论如何可能是更好的方法），您可以使用nth-child选择器和:after（或::after）伪元素，您可以这样做：

<ul>
<li>
 <div>
  <span>Some text</span>
  <span>Some large amount of text</span>
 </div>
 </li>
 </ul>

CSS：

/* Hide the text in the second span */
li span:nth-child(2){
    display:block;
    overflow:hidden;
    text-indent:100%;
    white-space:nowrap;
}

/* Create a pseudo-element after the first span with an ellipsis (UTF-8) as its content */
li span:nth-child(1):after{
    content:" \2026";
}

jsFiddle 示例

Answer 4

我不确定从您的示例中是否需要动态解决方案。所以问你几个问题

• 你确定肯定会有比
  容器显示更多的文本吗？
• 第二个跨度中的此文本是否仅显示在一行或多行上？

我问这个是因为它text-overflow:ellipsis;只能在单行上工作，然后只能与white-space:nowrap;

Answer 5

试试这个插件 -

http://plugins.jquery.com/ellipsis/

$('#target').ellipsis({
    row: 2,
    char: '**'
});

您也可以尝试这种方式（不完全支持）

span{
    /* essential */
    text-overflow: ellipsis;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;

    /* for good looks */
    padding: 10px;
}