限制使用CSS的div中的字符數

我有溢出的div：隱藏和其中的一些文本，最後一行半途可見。我應該怎麼做才能隱藏div的最後一行？甚至添加一些省略號。限制使用CSS的div中的字符數

是可以做到這一點與CSS只？（我並不想改變字體大小，或改變顯示：隱藏）

HTML：

<div> 
    Hello World, Hello World, Hello Booom 
</div>

風格：

div { 
    height:100px; 
    width:50px; 
    overflow:hidden; 
    border:1px solid black; 
}

我'喜歡看到所有的文字沒有「繁榮」或代替你好動臂 - 赫爾...

來源

2015-10-06 Marcin Doliwa

改變字體大小如所提到的其他瀏覽器使用CSS前綴？改變盒子的大小？改變溢出？使用js來計算可見的內容並剝去其餘的內容？有很多方法。猜猜你需要更具體。 – m02ph3u5

你想要一個類似省略號的「Read more」/「Read less」按鈕嗎？ – Jay

請嘗試像這樣http://jsfiddle.net/xp32ekqc/1/ –

-1

嘗試：

text-overflow:ellipsis; 
white-space: nowrap;

在你的css中。我希望你的幫助。我附上一個鏈接到的jsfiddle：JSFiddle Demo

來源

2015-10-15 11:14:00

我們作爲一個堆棧溢出在這裏，你寧願你的答案專注於回答這個問題，並省略這樣的不必要的絨毛如「你好」。同樣，爲了改進您的答案，將代碼格式化爲代碼會很有幫助。您還應花時間描述您的答案是如何工作的以及解決問題的方法;這樣OP和其他人將來可能會從中學到一些有用的東西。 –

你好我面臨同樣的問題，如果你的文本是一行然後文本溢出工作正常，但現在你在做不同的東西，即你想......在4或5行後因此您必須在高度應用省略號。

看到這個例子：

div { 
 
    height:90px; 
 
    width:50px; 
 
    overflow:hidden; 
 
    border:1px solid black; 
 
} 
 

 
.myDiv{ 
 
    display: block; /* Fallback for non-webkit */ 
 
    display: -webkit-box; 
 
    -webkit-line-clamp:5; 
 
    -webkit-box-orient: vertical; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<div class="myDiv"> 
 
    Hello World, Hello World, Hello Booom 
 
</div>

正如你可以看到在上面的例子中-webkit行鉗：5;所以它會添加....在5行。

注意：什麼是-webkit

WebKit是Safari瀏覽器/ Chrome瀏覽器的HTML/CSS的網頁瀏覽器渲染引擎。

的Web瀏覽器渲染引擎的列表

IE
- 引擎：三叉戟] [2]
- CSS前綴：-msie
火狐
- 引擎：壁虎] [3]
- CSS-前綴：-moz
歌劇
- 引擎：的Presto] [4]
- CSS -prefix：-o
野生動物園&鉻
- 引擎：WebKit的] [5]
- CSS前綴：-webkit

所以對於Safari /鉻使用- webkit in css和用於上述

來源

2015-10-16 12:20:44

限制使用CSS的div中的字符數

回答

相關問題