javascript jQuery根据字符数更改CSS中的行高
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9684835/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Change line-height in CSS depending on number of characters
提问by adamdehaven
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.
我的网站上有一个 Twitter 小部件，用于显示我们公司的最新推文。但是，如果推文超过一定长度，则它不适合网站上的容器并被切断。我想根据推文中的字符数以编程方式更改元素的行高 css。
The CSS that defines this part of the element is shown here:
定义这部分元素的 CSS 如下所示：
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>
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..
我需要检测推文是否超过“X”个字符，如果是，请将行高从 55px 更改为 24px。我不是要垂直居中文本，而是..
Example: http://justpaste.it/twitter-widgetIf 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.
示例：http: //justpaste.it/twitter-widget如果文本太长，它会在您看到其上方的“白色容器”结束的地方切断。我想更改此文本“条”的行高，以便它会换行到下一行并留在我的“红色”容器中。
In theory, this would be done with PHP, but I'm aware that I'll probably need to use jQuery.
理论上，这可以用 PHP 完成，但我知道我可能需要使用 jQuery。
EDIT: Here is the JS that produces the tweet:
编辑：这是产生推文的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..."
});
});
回答by robasta
var cnt = $(".tweeter_widget").text().length;
if (cnt > 10) {
$(".tweeter_widget").css("line-height", "5px");
}
ie:if more than ten characters in the div containing the Tweet, change the line-height.
即：如果包含推文的 div 中超过十个字符，请更改行高。
回答by MarkFisher
Edited code to include in tweet DIV setter, though there's probably some work still do be done:
编辑代码以包含在推文 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');
}
});
Chances are since this updates dynamically, you'll want to delay this with some sort of callback. If I understand the tweet API correctly, you could use the filter parameter to do this:
很有可能因为它是动态更新的，你会想要通过某种回调来延迟它。如果我正确理解推文 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;
}
});
});
I have not tested this code, of course.
当然，我还没有测试过这段代码。
