更改嵌入推文的最大宽度

Posted 2023-03-28

【中文标题】更改嵌入推文的最大宽度

【英文标题】：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>

【参考方案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>