如何處理文本溢出。是否有一個Firefox等效於IE和Safari的文本溢出風格？

我想在文本溢出時給用戶一些指示，並且對於容器來說太大。如何處理文本溢出。是否有一個Firefox等效於IE和Safari的文本溢出風格？

我正在使用溢出：隱藏所以，有一些機會，一些文本將不可見，我想找到一種方法讓用戶知道何時/如果發生這種情況。

文本溢出風格將適用於此，但FireFox不支持它。

更新：感謝@Galled爲此鏈接：text-overflow:ellipsis in Firefox 4? (and FF5)它顯示瞭如何模擬老版本的FireFox中的文本溢出：省略號。

看起來像文本溢出：省略號是在最近版本的Firefox工作作爲解釋在這裏：https://developer.mozilla.org/en/CSS/text-overflow#Browser_compatibility

更新：我真的很喜歡這個JavaScript解決方案（Determine if an HTML element's content overflows）。當然，儘管我在尋找純粹的HTML/CSS解決方案，但使用JavaScript將使您更好地控制如何顯示溢出內容。

來源

2011-11-22 Matthew

據this，Firefox已經到文本溢出支持（但在版本7.0）。

我做一個簡單的測試，並在Firefox 6.0的作品有缺陷：

<html> 
<head> 
<style> 
p { 
    white-space: nowrap; 
    width: 100%;      
    overflow: hidden;    /* "overflow" value must be different from "visible" */ 

    text-overflow: ellipsis; 
} 

div{ 
    width:30px; 
} 
</style> 
</head> 
<body > 
<div> 
<p>Hello, hello, hello, hello, hello, hello, hello, hello, hello, hello</p> 
</div> 
</body> 
</html>

來源

2011-11-22 16:06:01 Galled

我使用Firefox 5.0（由於插件衝突，尚未更新）。我做了一個小提琴來檢查它：http：//jsfiddle.net/g3un2/因此，Firefox 6.0可以正常工作。涼。 – Matthew

如果你的意思是支持'text-overflow：ellipsis'，Firefox不支持這個，但你可以看到[這個答案]（http://stackoverflow.com/questions/4927257/text-overflowellipsis-in-firefox- 4和ff5）看看它是如何模擬它。 – Galled

https://developer.mozilla.org/en/CSS/text-overflow#Browser_compatibility - 據此，在FF7之前不支持文本溢出。 – Matthew

我認爲你正在尋找的CSS屬性是overflow。

[但既然你不說你想該怎麼做，我不能肯定的。]

來源

2011-11-22 15:57:06

請不要引用W3Schools的：http://w3fools.com/ – ANeves

溢出只是砍掉什麼不適合。這並不表示某些東西已被切斷。考慮文本是3行，但它所在的容器只有足夠的空間用於2行。1行消失並且用戶不知道。 – Matthew

如何處理文本溢出。是否有一個Firefox等效於IE和Safari的文本溢出風格？

回答

相關問題