jQuery根据字符数更改CSS中的行高

Question

我的网站上有一个 Twitter 小部件，其中显示了我们公司的最新推文。但是，如果推文超过一定长度，则它不适合网站上的容器并被切断。我想根据推文中的字符数以编程方式更改元素的行高 css。

定义这部分元素的 CSS 如下所示：

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

在页面上，元素仅由以下代码生成：

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

我需要检测推文是否超过“X”个字符，如果是，请将行高从 55 像素更改为 24 像素。我不是要垂直居中文本，而是..

示例：http://justpaste.it/twitter-widget 如果文本太长，它会在您看到其上方的“白色容器”结束的地方切断。我想更改此文本“条”的行高，使其换行到下一行并留在我的“红色”容器中。

理论上，这可以使用 PHP 完成，但我知道我可能需要使用 jQuery。

编辑：这是生成推文的 JS：

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

Answer 1

see this fiddle

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

ie：如果包含 Tweet 的 div 中超过十个字符，则更改行高。

Answer 2

已编辑代码以包含在推文 DIV 设置器中，尽管可能仍有一些工作要做：

/* 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..."
      });
      if ($(".tweeter_widget").html().length > X)
      {
         $(".tweeter_widget").css('line-height', '24px');
      }
});

由于此更新动态更新，您可能需要通过某种回调来延迟此更新。如果我正确理解了 tweet API，您可以使用 filter 参数来执行此操作：

/* 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...",
        filter: function(t) { 
                   if (t.tweet_raw_text.length > X)
                   {
                      $(".tweeter_widget").css('lineheight', '24px');
                   }
                   return t;
                }

      });
});

当然，我还没有测试过这段代码。