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

我的网站上有一个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} 

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

我需要检测推文是否超过’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

看到这个小提琴

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

即：如果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; } }); }); 

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