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

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

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 -嵌入响应/