Question

我正在尝试将twitter Feed嵌入到我的角度2应用程序中，但是在250到550像素（https://dev.twitter.com/web/embedded-tweets/parameters）之间设置的推文有最大宽度限制。有没有办法在不使用j-query的情况下将max-width更改为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>

Answer 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>

更改嵌入式推文的最大宽度

1 个答案: