更改嵌入推文的最大宽度答案

【问题标题】：changing the max-width of the embedded tweet更改嵌入推文的最大宽度
【发布时间】：2018-04-23 21:04:47
【问题描述】：

我正在尝试将 twitter 提要嵌入到我的 angular 2 应用程序中，但是对于设置在 250 到 550 像素之间的推文 (https://dev.twitter.com/web/embedded-tweets/parameters)，存在最大宽度限制。有没有办法在不使用 j-query 的情况下将最大宽度更改为 100%。它应该基本上覆盖整个灰色背景。提前谢谢你。

!function (d, s, id) {
      var js,
        fjs = d.getElementsByTagName(s)[0],
        p = 'https';
      if (!d.getElementById(id)) {

        js = d.createElement(s);
        js.id = id;
        js.src = p + '://platform.twitter.com/widgets.js';
        fjs.parentNode.insertBefore(js, fjs);
      }
    }

    (document, 'script', 'twitter-wjs');

.SandboxRoot {
  width: 100% !important;
}
div {
  background-color: grey;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
}
.EmbeddedTweet{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
}
div twitterwidget {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
}

<div>
  <div>
    <blockquote class="twitter-tweet" data-lang="en">
       <a href="https://twitter.com/Interior/status/463440424141459456?ref_src=twsrc%5Etfw"></a>
    </blockquote>
  </div>
</div>

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

【问题讨论】：

标签： javascript html css angular twitter

【解决方案1】：

是的，这是可能的。

使用twitterwidget::shadow 选择器定位

! function(d, s, id) {
  var js,
    fjs = d.getElementsByTagName(s)[0],
    p = 'https';
  if (!d.getElementById(id)) {

    js = d.createElement(s);
    js.id = id;
    js.src = p + '://platform.twitter.com/widgets.js';
    fjs.parentNode.insertBefore(js, fjs);
  }
}

(document, 'script', 'twitter-wjs');

.SandboxRoot {
  width: 100% !important;
}

div {
  background-color: grey;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
}

twitterwidget::shadow .EmbeddedTweet {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
}

div twitterwidget {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
}

<div>
  <div>
    <blockquote class="twitter-tweet" data-lang="en">
      <a href="https://twitter.com/Interior/status/463440424141459456?ref_src=twsrc%5Etfw"></a>
    </blockquote>
  </div>
</div>

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

【讨论】：