How to handle text overflow. Is there a Firefox equivalent to the text-overflow style from IE and Safari?

Question

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.

Galled · Accepted Answer · 2011-11-22 16:49:33Z

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>

edited Nov 22, 2011 at 16:49

answered Nov 22, 2011 at 16:06

Galled

4,2012 gold badges31 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Matthew Over a year ago

I'm using Firefox 5.0 (haven't updated yet due to plugin conflicts). I made a fiddle to check it:jsfiddle.net/g3un2 So Firefox 6.0 works ok then. Cool.

Galled Over a year ago

If you mean the support to text-overflow:ellipsis Firefox has no support to this, but you can see this answer to see how emulate it.

Matthew Over a year ago

developer.mozilla.org/en/CSS/… - According to this, text-overflow isn't supported until FF7.

Wes Hardaker · Accepted Answer · 2011-11-22 15:57:06Z

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.]

answered Nov 22, 2011 at 15:57

Wes Hardaker

22.3k2 gold badges42 silver badges70 bronze badges

1 Comment

Matthew Over a year ago

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.

Collectives™ on Stack Overflow

How to handle text overflow. Is there a Firefox equivalent to the text-overflow style from IE and Safari?

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related