Question

我试图强制嵌入的推文通过将其宽度设置为100％来响应。

我试图按如下方式调整内联宽度：

<blockquote class="twitter-tweet" width="100%">...</blockquote>

我还尝试按照以下方式设置twitter-tweet类的样式：

blockquote.twitter-tweet {width:100% !important}

两种方法都失败了。这简单地被脚本覆盖了Twitter需要包含在推文中吗？（该脚本可在http://platform.twitter.com/widgets.js引用。）

非常感谢任何帮助强制嵌入到100％宽度的帮助。

Answer 1

自2016年5月起，Twitter使用其他嵌入式HTML。看起来像这样。他们推动了iFrame集成。

<twitterwidget class="twitter-tweet twitter-tweet-rendered" id="twitter-widget-1"
               style="position: static; visibility: visible; display: block; max-width: 100%; width: 500px; min-width: 220px; margin-top: 10px; margin-bottom: 10px;"
               data-tweet-id="732567624345915393">
    <div data-twitter-event-id="1" class="SandboxRoot env-bp-350" style="position: relative;"> 
        ...
    </div>
</twitterwidget>

在DOM中，您会在#shadow-root打开标记后找到名为twitterwidget的元素（请在 Chrome检查器中查看）。从现在开始，可以通过css和伪元素阴影操纵所有Twitter Ebends。

宽度示例：

twitterwidget::shadow .EmbeddedTweet {
    width: 700px;
    max-width: 960px;
}

实施例 - https://jsfiddle.net/86dc9y5t/

请勿在产品页面上使用： - https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM

Answer 2

只需将宽度设置为窗口小部件本身的宽度。

检查在控制台中检查小部件容器的ID是什么。

#twitter-widget-0{ width:100%; }

Answer 3

Cory，使用Twitter提供的嵌入功能是不可能的。嗯，它可能在某种程度上，但只有高达520px。见https://dev.twitter.com/docs/embedded-timelines。

但是，您可以像这样添加width =“2000”

<a class="twitter-timeline" width="2000" href="https://twitter.com/twitterapi" data-widget-id="YOUR-WIDGET-ID-HERE">Tweets by @twitterapi</a>

` 然后调整你的CSS。不过，这不是最佳解决方案。

有一篇可能对您有用的旧帖子，不知道是否仍有效，但值得一看，请查看http://kovshenin.com/2012/quick-tip-how-to-make-tweet-embeds-responsive/

Answer 4

此解决方案适合我。

基本上，你必须在你的twitter小部件iframe中注入一些css。

此示例使用jQuery

<style type="text/css" id="twitter-style">
  .timeline { max-width: 100%; }
</style>

<script type="text/javascript">
twttr.widgets.createTimeline(
          'WIDGET_ID_GO_HERE',
          $('#widget-placeholder-go-here')[0],
          {
            chrome: 'nofooter noborders noheader' //optional
          }
        ).then(function(el) {
          $(el).contents().find('head').append($('#twitter-style'));
        });
</script>

Answer 5

带阴影的所述解决方案似乎仅适用于Chrome。对于其他浏览器，它可以通过javascript操纵。这是jQuery的一个例子。

jQuery(window).load(function () {
    jQuery('.twitter-tweet').contents().find('.EmbeddedTweet').css({
            maxWidth: "960px", width: "100%"
    });
});

Answer 6

对于那些想知道为什么这些解决方案有时不起作用的人;这是因为推特卡的标题和内容为white-space:nowrap

但不要担心，这是您需要使用的唯一代码，因为它涵盖了所有情况（atm）：

#twitter-widget-0,#twitter-widget-1{ width:100%; }

twitterwidget::shadow .SummaryCard-content *{white-space:normal !important;}

twitterwidget::shadow .resize-sensor{display:none !important;width:0px !important;overflow:hidden !important;}

Answer 7

不幸的是，上述解决方案对我不起作用，仅当我查询shadowRoot并在推文加载后延迟执行时才起作用：

JavaScript

setTimeout((function() {
  return $('.twitter-tweet').each(function() {
    return $(this.shadowRoot).find('.EmbeddedTweet').css({
      width: '99%',
      maxWidth: '100%'
    });
  });
}), 2000);

咖啡

setTimeout (->
  $('.twitter-tweet').each () ->
    $(this.shadowRoot).find('.EmbeddedTweet').css
      width: '99%'
      maxWidth: '100%'
), 2000

强制嵌入式推文达到100％宽度

7 个答案: