强制嵌入推文为 100% 宽度

我试图通过将宽度设置为 100% 来强制嵌入的推文做出响应式行为。

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

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

我还尝试对 twitter-tweet 类进行样式设计，如下所示：

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

这两种方法都失败了。这是否只是被 Twitter 要求包含在推文嵌入中的脚本覆盖？ （该脚本可以参考http://platform.twitter.com/widgets.js http://platform.twitter.com/widgets.js.)

任何强制嵌入到 100% 宽度的帮助将非常感激。

自 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 after twitterwidget打开标签（签出镀铬检查员）。从现在开始，可以通过 css 和伪元素阴影来操作所有 Twitter Ebend。

宽度示例：

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

例子 -https://jsfiddle.net/86dc9y5t/ https://jsfiddle.net/86dc9y5t/

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