title: jQuery Change line-height in CSS depending on number of characters
body: <p>I have a Twitter widget on my site that displays our company's most recent tweet. If the tweet is over a certain length however, it does not fit in the container on the site and gets cut off. I would like to programmatically change the line-height css of the element depending on the number of characters in the tweet.</p>
  
  <p>The CSS that defines this part of the element is shown here:</p>
  
  <pre><code>ul.tweet_list li{overflow-y: hidden;overflow-x: hidden;padding: 0.5em !important;height: 55px;line-height:55px;vertical-align: middle}
  </code></pre>
  
  <p>and on the page, the element is generated by only this code:</p>
  
  <pre><code>&lt;div class="tweeter_widget"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I need to detect if the tweet is over 'X' number of characters, and if so, change the line-height from 55px, to 24px. I'm not trying to vertically center text, but rather..</p>
  
  <p>Example: <a href="http://justpaste.it/twitter-widget" rel="nofollow">http://justpaste.it/twitter-widget</a>
  If the text is too long, it cuts off around where you see the "white container" above it end. I want to change the line-height of this "bar" of text so that it will wrap to the next line AND stay in my "red" container.</p>
  
  <p>In theory, this would be done with PHP, but I'm aware that I'll probably need to use jQuery.</p>
  
  <p>EDIT: Here is the JS that produces the tweet:</p>
  
  <pre><code>/* Twitter initiates. Enter your username here. */
  jQuery(function($){
        $(".tweeter_widget").tweet({
          join_text: "auto",
          username: "username",
          avatar_size: null,
          count: 1,
          auto_join_text_default: "",
          auto_join_text_ed: "",
          auto_join_text_ing: "",
          auto_join_text_reply: "",
          auto_join_text_url: "",
          loading_text: "loading tweets..."
        });
      });
  </code></pre>