如何在這個html標記中通過css顯示省略號

對於那些通過css命令的人來說，我有一個很小的問題。我有以下的標記：如何在這個html標記中通過css顯示省略號

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

而CSS是：

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

現在我想告訴省略號其中包含大量文本的第二範圍內。我怎樣才能做到這一點？

任何人都可以幫我嗎？

來源

2013-04-20 user1740381

試試這個插件 -

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

來源

2013-04-20 12:30:01

感謝組合適用於單行，然後反應，但沒有任何純CSS的方法來做到這一點？ – user1740381 2013-04-20 12:31:53

見編輯.............. – 2013-04-20 12:43:18

確保你也將'display：block'應用到'span'。 – interestinglythere 2013-04-20 12:56:36

不知道爲什麼你向我們展示瞭如何樣式化li s但是...

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

來源

2013-04-20 12:43:35 interestinglythere

我誤解了提問者。請忽略這個答案。 – interestinglythere 2013-04-20 12:52:23

假設你的結構總是喜歡您標記了（如果沒有，你可以使用類 - 可能是一個更好的方法是這樣），你可以使用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 Example

來源

2013-04-20 12:52:56

如果您只有一個班輪跨度，您只需要這個。沒有僞元素需要

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

根據caniuse.com所有瀏覽器支持這一點。

來源

2013-04-20 13:13:04 Ehtesham

我不確定是否從你的例子中你需要動態的解決方案。因此，對於你幾個問題

你肯定知道總會有比
容器可以顯示更多的文字？
此文本在第二個跨度中僅顯示在一行還是多行上？

我問這個，因爲text-overflow:ellipsis;也只是在white-space:nowrap;

來源

2013-04-20 15:00:59 Timidfriendly

如何在這個html標記中通過css顯示省略號

回答

相關問題