如何從第N行文本開始應用`text-overflow`？

w3schools.com/cssref/css3_pr_text-overflow.asp 如何從第N行文本開始應用`text-overflow`？

如何創建一個div並在其文本換正常，但只有達到一定的線（例如第二線），並從那時起有text-overflow: ellipsis屬性生效並隱藏其餘在上面的鏈接在該div中的文本？

2013-03-19 Andrei Oniga

很肯定這不能與'文本溢出來完成：ellipsis'孤單。我一直在尋找同樣的東西，因爲我不知道多久.. – techfoobar 2013-03-19 13:19:46

多行文本中的文本溢出是不可能的。 – otinanai 2013-03-19 13:30:41

我個人使用的是Trunk8插件，它完全符合你的需求。看看在demo

例如，在你的情況與插件，你會使用：

$('#div').trunk8({ 
    lines: 2 
});

Plugin Link

來源

2013-03-19 13:19:38

我一定會試試看，它看起來很有希望。當然，我寧願單純依靠CSS和HTML。 – 2013-03-19 13:24:57

@RyanMcDonough嘿，謝謝你給我看！我剛剛發生在這個頁面上，發現一個新的jQuery插件添加到我的工具箱！ – VoidKing 2013-03-19 13:37:03

有你想做的事沒有CSS，但可能的解決方法是這樣的：

.ellipsis{ 
    line-height: 10px; //10px for easy multiplication 
    height: 30px; //line-height * n 
    text-overflow: ellipsis; 
}

來源

2013-03-19 13:21:18 Bill

恐怕這不起作用 – 2013-03-19 13:22:47

難道你不應該解釋你的意思是「10px爲簡單的多重複制嗎？」 – VoidKing 2013-03-19 13:23:19

我很清楚他的意思 – 2013-03-19 13:24:22

對於純CSS的解決辦法，並自text-overflow不打算多行文本你可以使用一個破解如果你有固定寬度和行高爲你的文本容器和控制你的文本應該開始隱藏。

模擬 text-overflow

CSS：

div{ 
    width:55%; 
    padding:20px; 
    line-height:20px; 
    height:20px; /*for showing 2 lines of text*/ 
    overflow:hidden; 
    position:relative; 
} 

div:after{ 
    content:"..."; 
    position:absolute; 
    bottom:0; 
    right:10px; 
}

看到這個演示：http://jsfiddle.net/kfJAy/

來源

2013-03-19 13:44:17 otinanai

啊！如果不是因爲你不能在相同的文本容器中包含暫停點（請參見[http://jsfiddle.net/kfJAy/1/](here）），我會立即選擇此答案。儘管如此，非常感謝您提供了一個很好的解決方法 – 2013-03-19 14:12:14

是的，我知道這種方法有很多限制，但如果您使用* fixed *文本，它可能會很有用。我曾經爲一個項目使用過它，但是我可以（並且必須）將*點*定位到像素上。 – otinanai 2013-03-19 14:25:41

如何從第N行文本開始應用`text-overflow`？

回答

相關問題