我正在尝试将twitter feed嵌入我的angular 2应用程序中,但是在tweet上设置的最大宽度限制在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>

最佳答案

是的,有可能。

使用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>

10-04 11:12