2015 Juni

How to detect multiline text with jQuery

Currently there is no way to do this job just with css. I saw various Javascript solutions to do this, most of them are way to complicated (for my use case).

In my case i just need it to detect multiline field labels. So … as i have a fix font size here, i just look out for the elements height via jquery and add a multiline class if its higher then on line of text.

Idea to modify this: Get the height of a one-liner label dynamically (compare the determined height values and use the flattest, also check for empty labels …).

        /* Check if field labels are heigher then one line */
        $(".entityform label").each(function( index ) {
          label = $(this);
          labelHeight = label.height();
          if(labelHeight > 20){
            label.addClass('multiline-label');
          }
        });