jQuery根据字符数更改CSS中的行高 [英] jQuery Change line-height in CSS depending on number of characters

问题描述

我在我的网站上有一个Twitter小部件，显示我们公司最近的tweet。然而，如果tweet超过一定长度，它不适合在站点上的容器中并且被切断。我想以编程方式根据tweet中的字符数更改元素的行高CSS。

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.

定义元素的这一部分的CSS被显示这里：

The CSS that defines this part of the element is shown here:

ul.tweet_list li{overflow-y: hidden;overflow-x: hidden;padding: 0.5em !important;height: 55px;line-height:55px;vertical-align: middle}

该元素仅由此代码生成：

and on the page, the element is generated by only this code:

<div class="tweeter_widget"></div>

我需要检测tweet是否超过X个字符，如果是，行高从55px到24px。

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..

示例： http://justpaste.it/twitter-widget
如果文本太长，它会在您看到其上方的白色容器的地方切断。我想改变文本的这个条的行高，以便它将包装到下一行，并留在我的红色容器。

Example: http://justpaste.it/twitter-widget 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.

，这将使用PHP，但我知道，我可能需要使用jQuery。

In theory, this would be done with PHP, but I'm aware that I'll probably need to use jQuery.

编辑：这里是生成tweet的JS： / p>

Here is the JS that produces the tweet:

/* 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..."
      });
    });

推荐答案

看这个小提琴

var cnt =  $(".tweeter_widget").text().length;
if (cnt > 10) {
    $(".tweeter_widget").css("line-height", "5px"); 
} 

即：如果包含Tweet的div超过十个字符， line-height。

ie:if more than ten characters in the div containing the Tweet, change the line-height.

这篇关于jQuery根据字符数更改CSS中的行高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！