locked
ui related issue RRS feed

  • Question

  • i am facing problem in mozilla fireprox to wrapping a long url.

    in IE wordwrap property working fine but in mozilla it is not working.

    there are any alternative of wordwrap property in mozilla.

    actually i have a very long url which is required to show in a box of width 600 px.

    url is very long in ie wordwrap property nicely broken it in multiple lines.

    but in mozilla it show in one line so it goes outside the box.

    please provide me the solution.

    i am working on it for many days.
    Wednesday, August 6, 2008 1:57 PM

All replies

  • Hi,

    Please go through the following code snippet:

    <?xml version = "1.0"?>

     

    <bindings xmlns = "http://www.mozilla.org/xbl" xmlns:html = "http://www.w3.org/1999/xhtml">

    <binding id = "wordwrap" applyauthorstyles = "false">

       <implementation>
          <constructor>
             //

             var elem = this;           // maintain a reference to the bound element

             elem.addEventListener('overflow',
             function()
             {
                // matches any "mangled" HTML tag
                var exp = /<&#8203;\/*[&#8203;_\s="'\w]+>/g;

                var txt = elem.innerHTML;     // the bound element's innerHTML
                var chars = txt.split('');
                var newTxt = chars.join('&#8203;');
                newTxt = newTxt.replace(exp, reconstructTag);
                elem.innerHTML = newTxt;
             },false);

             function reconstructTag(_tag)
             {
                return _tag.replace(/&#8203;/g, '');
             }

             //
          </constructor>
       </implementation>

    </binding>

    </bindings>

    The first thing we do is stuff the bound element (this) in a variable, elem. This is of course, totally optional, but it helps a lot.

    Next, we add an event listener to the bound element that "listens" for the 'overflow' event (whenever text overflows its containing element). You're probably aware the in typical Javascript, there is no such 'overflow' event. This, along with its counterpart, 'underflow' are just two the many "extras" that you get when writing Javascript in XBL.

    The remainder of the code will all take place within the context of the anonymous function that executes on 'overflow'.

    Next, we create a regular expression that matches any "mangled" HTML tag (more on this in a bit).

    The next three steps are all quite straight-forward. We store the bound element's innerHTML in a variable called, txt. We then call .split('') on that text and store it in the variable, chars. Passing an empty string into the .split(..) function will yield an array of characters representing the string that was split. In other words, each character in the string is now an element in the array chars. Finally, we put all of those characters back together by calling chars.join('&#8203'); and stuffing the result in newTxt. This inserts that special unicode symbol between each character in the array as it joins them back together.

    Thanks.

    Sunday, June 5, 2011 2:35 AM