2008-10-12 89 views
2

我正在尋找一種技術(JavaScript,CSS,無論???),這將使我可以控制顯示的字符串數量。該字符串是搜索的結果(因此不是最初知道的)。一個簡單的字符計數方法是微不足道的,但不能接受,因爲它需要處理比例字體。換句話說,如果我想限制爲70像素,那麼下面的示例顯示不同的字符計數(9和15),兩者測量相同: -限制在網頁上顯示的字符串長度

歡迎M ...
嗨Iain,如果我...

如果你看看雅虎搜索結果,他們可以限制標題字符串的長度,並在長字符串的末尾添加省略號以指示更多。 (嘗試網站:loot.com無線+鍵盤+和+鼠標看到雅虎實現這個例子)

任何想法?

+0

可能的重複[如何將長文本指示爲較小的帶有CSS的固定列?](http:// stackoverflow。com/questions/2108740/how-do-i-indicating-long-text-into-a-small-fixed-column-with-css) – 2010-08-23 19:52:08

回答

2

也許CSS屬性overflow: hidden;可以幫助你,連同width

+0

謝謝 - 偉大的開始! style ='overflow:hidden;寬度:100像素;身高:1.2em' 成功處理了長度限制(您必須添加高度來停止換行)。 唯一的缺點是我不知道是否有溢出,因此我不知道是否要添加橢圓。 – GreybeardTheUnready 2008-10-12 12:34:13

+0

而不是應用高度 - 因爲我們都知道這並不好玩......嘗試使用white-space:nowrap CSS屬性。這將強制所有線路停留在一條線上:D – Roi 2012-03-04 21:51:26

1

使用固定寬度的跨度,overflow-x:hidden和white-space:nowrap將是一個開始。

要在跨瀏覽器場景中獲取elipsis將是困難的。 IE有文本溢出:elipsis但這是非標準的。這在Opera中用-o-text-overflow模擬。然而,mozilla沒有這個。雅虎的JavaScript API處理這一點。

+0

我認爲您需要overflow-x:hidden。或者只是去溢出:隱藏是安全的。 – eyelidlessness 2008-10-12 17:30:04

0

雅虎做了這個服務器端,在HTML中返回截斷和elipsis('...')。據推測,這是在字符數上完成的,如果這不是你的選擇,那麼服務器端就不在了。

除了overflow: hidden我不確定CSS可以幫到你。你可以使用Javascript來測量包含元素的寬度,並根據它來截斷文本。這可以與overflow:hidden;結合使用,以便文本元素不會突然調整大小,但是您可能必須提取文本並在頁面上添加臨時元素以進行測量。根據要截斷的元素數量,這可能無法很好地工作。

另一個稍微黑客的選擇是測量包含字母'W'的元素的寬度,然後執行字符計數並截斷如果(char_count * width_of_w) > desired_width

您可以使用text-wrap: none;來停止文本換行,儘管這是一個CSS3屬性,而最後我檢查的只是IE支持的(想象一下當我發現這個問題時我的震驚!)。

0

在CSS:的.class名{ 寬度:5em; white-space:nowrap; text-overflow:ellipsis; }

希望它能幫助你。