2016-11-07 73 views
-1

我在結束的div上添加3個點有問題。我的文字太長了,沒有足夠的空間來顯示,在div上我想顯示3個點。Css在結尾添加3個點

我知道文字溢出省略號,但現在工作正確的IE和Firefox。

是否有可能以另一種方式進行。

https://jsfiddle.net/kq1Lp6og/

我想創建CSS緩解,但不知道怎麼沒有省略號。

HTML

<div> 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
     proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
</div> 

CSS

div{ 
    height:38px !important; 
    overflow: hidden; 
} 
+1

你不應該使用!重要的。如果你使用它,這意味着你沒有正確使用類。 !重要的是比一切都有更高的規則權重,如果你的html非常大,你可能會遇到問題。 – xale94

回答

1

div { 
 
    max-width:100%; 
 
    height:38px; 
 
    overflow: hidden; 
 
    position: relative; 
 
    line-height: 1em; 
 
    max-height: 3em; 
 
    text-align: justify; 
 
    padding-right: 1em; 
 
    font-size: 20px; 
 
} 
 
div:before { 
 
    content: '...'; 
 
    position: absolute; 
 
    right: 2px; 
 
    bottom: 0px; 
 
}
<div> 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
     proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</div>

+0

我上次嘗試過,沒有工作 – ml92

+0

我更新了我的答案 – Eldeniz

0

我知道你要的CSS,但你可能(或未來的讀者可能)不希望CSS:它當窗口大小改變時它不會更新,它不是一個很好,也不靈活,也不是ea sy方法有「...」,我有同樣的問題,我試圖用CSS來修復,最後我使用了一個名爲dotdotdot的JS庫。 PS:請不要不喜歡,因爲它不符合所有標準,我有完全相同的問題,並且我明白CSS不一定是最好的選擇(對於用戶體驗和開發人員),所以重要的是你知道你擁有的所有選項。