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'个字符，如果是，请将行高从55px更改为24px。我不是试图垂直居中文本，而是...... ..

示例：http://justpaste.it/twitter-widget 如果文字太长，它会切断你看到它上面的“白色容器”的位置。我想更改文本“bar”的行高，以便它将换行到下一行并保留在我的“红色”容器中。

理论上，这可以通过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：如果div中包含Tweet的字符超过10个，请更改行高。

Answer 2

编辑的代码包含在推文DIV setter中，尽管可能还有一些工作要做：

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

由于动态更新，您可能希望通过某种回调来延迟这种情况。如果我正确理解了推文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;
                }

      });
});

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

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

2 个答案: