How to check if a text field has wrapped and the number of lines it has wrapped to.

Question

Hi all...

I have a complex vertical nav which includes transparent PNG's in my design. I need to make these menus grow dynamically in height because the content is pulled from a CMS and some buttons can grow in height depending on how many lines the text field wraps to.

Here is my scernario:

<ul>
 <li>
     <a>
       <span>
            <span> This is an example of a very long menu name which will wrap<span>
         </span>
     </a>
 </li>
</ul>

I need to use some javascript to work out if the second span tag has wrapped the text inside it and by how many lines so that I can deliver a different background image for that menu item.

Does anyone know how I would go about this?

Thanks, James

Answer 1

Managed to find a solution. I can check the height of the span using jQuery's .height() method and if the height is anything bigger than the original size, I can deliver a different image for that button :)