0

I would like to give some kind of indication to the user when text has overflowed and is too large for a container.

I'm using overflow:hidden so, there is a chance that some text will not be visible and I want to find a way to let the user know when/if this happens.

The text-overflow style would work for this but FireFox does not support it.

Update: Credit to @Galled for this link: text-overflow:ellipsis in Firefox 4? (and FF5) which shows how to emulate text-overflow:ellipsis in older versions of FireFox.

Looks like text-overflow:ellipsis is working in the more recent version of FireFox as explained here: https://developer.mozilla.org/en/CSS/text-overflow#Browser_compatibility

Update: I really like this JavaScript solution ( Determine if an HTML element's content overflows ). Of course, using JavaScript will give you a lot more control over how overflowed content is displayed though I was looking for a pure HTML/CSS solution.

Community
  • 1
  • 1
Matthew
  • 8,183
  • 10
  • 37
  • 65

2 Answers2

1

According to this, Firefox has support to text-overflow (but in version 7.0).

I make a simple test, and in Firefox 6.0 works flawed:

<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>
Galled
  • 4,146
  • 2
  • 28
  • 41
  • I'm using Firefox 5.0 (haven't updated yet due to plugin conflicts). I made a fiddle to check it:http://jsfiddle.net/g3un2/ So Firefox 6.0 works ok then. Cool. – Matthew Nov 22 '11 at 16:10
  • 1
    If you mean the support to `text-overflow:ellipsis` Firefox has no support to this, but you can see [this answer](http://stackoverflow.com/questions/4927257/text-overflowellipsis-in-firefox-4-and-ff5) to see how emulate it. – Galled Nov 22 '11 at 16:31
  • https://developer.mozilla.org/en/CSS/text-overflow#Browser_compatibility - According to this, text-overflow isn't supported until FF7. – Matthew Nov 22 '11 at 16:44
0

I think the CSS property you're looking for is overflow.

[But since you don't say exactly what you're trying to do I can't be positive.]

Wes Hardaker
  • 21,735
  • 2
  • 38
  • 69
  • Overflow just chops off whatever doesn't fit. This does not indicate to the user that something has been chopped off. Consider text that is 3 lines but the container it is in only has enough room for 2. 1 line disappears and the user has no idea. – Matthew Nov 22 '11 at 16:02