Submenu item to wrap when text longer than width!

Hi there,

How can I make a submenu item to wrap when text longer than width?

Thanks

CSS3 has a word wrap but not sure if it is supported in all browsers at this time or not.

You could try something like the following:

.wrapword{
white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
white-space: pre-wrap;       /* css-3 */
word-wrap: break-word;       /* Internet Explorer 5.5+ */
word-break: break-all;
white-space: normal;
}

<table style="table-layout:fixed; width:400px">
    <tr>
        <td class="wrapword">
        </td>
    </tr>
</table>

Thanks for your reply...

in which CSS file shall I place this code?

Please note that was an example only and the html code was not Dolphin code but just an example I copied along with the rest.

I think the css file you want is top_menu.css (or something similar); I don't create templates day to day so I may be wrong on the file name.  What you want to do is to use inspect element (or firebug plugin which I prefer) in your browser; right click on an element to inspect it and choose inspect element or inspect with firebug or something like that.  Then you can see the class that handles the text for the menu element and apply the css I showed to that class.  If you don't know how to do such things, then you should get someone to help.  And back up your css file before making changes so if you totally screw up the menu you can put it back.  You will need to clear the caches in the admin when making changes to the templates.

It actually will not be that simple.

The sub menu items do not wrap due to a combination of the current overflow setting, the white-space setting and the fixed height which is by design to keep them all consistent. It will take quite a bit of playing and several changes to get it to wrap and do it properly without it messing up the rest of them.