У меня есть виджет 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>
Мне нужно определить, превышает ли твит число «Х», и если да, измените высоту строки с 55 пикселей на 24 пикселя. Я не пытаюсь вертикально центрировать текст, а скорее ..
Пример: http://justpaste.it/twitter-widget Если текст слишком длинный, он обрезается вокруг, где вы видите «белый контейнер» над ним. Я хочу изменить высоту строки этого «бара» текста, чтобы он переместился на следующую строку и остался в моем «красном» контейнере.
Теоретически это будет сделано с PHP, но я знаю, что мне, вероятно, придется использовать jQuery.
EDIT: Вот 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..." }); });
см. эту скрипку
var cnt = $(".tweeter_widget").text().length; if (cnt > 10) { $(".tweeter_widget").css("line-height", "5px"); }
т.е.: если в div, содержащем твит, более десяти символов, измените высоту строки.
Отредактированный код для включения в твиттер 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-интерфейс 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...", filter: function(t) { if (t.tweet_raw_text.length > X) { $(".tweeter_widget").css('lineheight', '24px'); } return t; } }); });
Конечно, я не тестировал этот код.