Thursday, October 22, 2009

text-overflow for Firefox

Since I really want to truncate my string that is longer than its block's width and add ... to the end, I looked around many sites and blogs. I have found a very interesting thing to deal with this issue. But, it works for all browsers except the most popular browser for most developers which they have been believing for its features. However, we still have a trick to make it happen :-)

Now have a look at this:

<html>
<head>
    <title>Ellipsis</title>
    <style type="text/css">
        .ellipsis { 
            white-space: nowrap; 
            overflow: hidden; 
            text-overflow: ellipsis; 
            -o-text-overflow: ellipsis; 
            -moz-binding: url('ellipsis.xml#ellipsis'); 
        }
       .test{
        width:250px;
   
       }
     </style>
</head>
<body>
    <div>
        <h4 class="test">
            <a  class="ellipsis" href="#">

              Superior Rooms are richly appointed, decorated in soft tones and offer superior views. The rooms are warm and inviting with hardwood floors and a marble entry.     * Superior Rooms feature air-conditioning, satellite television, a refrigerator and a private bar, and are equipped with telephones, a fax/modem line and high-speed Internet access.    * The bathroom includes a deep soaking tub
            </a>
        </h4>
    </div>

</body>
</html>



  • Explanation 
Please focus on css codes in head section above. you can see one property containing value ellipsis (text-overflow: ellipsis;)-it means it clips the string and add ... to the end, but it supports only for IE. Additionally, -o-text-overflow: ellipsis;  supports for Opera. The last one  -moz-binding: url('ellipsis.xml#ellipsis'); is a hack for firefox. So, you should have an xml file like below then:
<?xml version="1.0"?>
<bindings
  xmlns="http://www.mozilla.org/xbl"
  xmlns:xbl="http://www.mozilla.org/xbl"
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <binding id="ellipsis">
        <content>
            <xul:window>
                <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
            </xul:window>
        </content>
    </binding>
</bindings>


As a result, you will get your string formatted with ... :-)


P.S: It caused me a very headache to get it done, yet I am still not satified with it yet because you see css codes in HTML. I have tried to extract those css codes to external file; unfortunately I could  not get it worked. If you have any experience with it, please drop your comment. You are always welcome!

Additional Resources:

http://www.rikkertkoppes.com/thoughts/2008/6/  
http://ernstdehaan.blogspot.com/2008/10/ellipsis-in-all-modern-browsers.html
http://www.quirksmode.org/css/textoverflow.html

 

No comments:

Post a Comment