Forcing embedded tweet to 100% width

问题

I'm trying to force an embedded tweet to behave responsively by setting its width to 100%.

I've attempted adjusting the width inline as follows:

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

I've also attempted styling the twitter-tweet class as follows:

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

Both approaches have failed. Is this simply being overwritten by the script Twitter requires to be included with the tweet embed? (The script can be referenced at http://platform.twitter.com/widgets.js.)

Any help in forcing the embed to 100% width would be very much appreciated.

回答1:

Cory, this is not possible using Twitter's provided embed. Well, it's possible to some extent, but only up to 520px. See https://dev.twitter.com/docs/embedded-timelines.

However, you can add width="2000" like this `

<a class="twitter-timeline" width="2000" href="https://twitter.com/twitterapi" data-widget-id="YOUR-WIDGET-ID-HERE">Tweets by @twitterapi</a>

` And then adjust your CSS. It's not the best solution, though.

there's an old post that might be of use for you, don't know if still works, but worth a view, check it out at http://kovshenin.com/2012/quick-tip-how-to-make-tweet-embeds-responsive/

回答2:

Since May 2016 Twitter use an other embed HTML. It looks like this. They droped iFrame integration.

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

In the DOM you will find an Element called #shadow-root after twitterwidget open tag (check out in Chrome inspector). From now it is possible to manipulate all Twitter Ebends by css and pseudo element shadow.

Example for width:

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

Example - https://jsfiddle.net/86dc9y5t/

Do not use on product pages: - https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM

回答3:

Simply set the width setting the width of the widget itself.

Check inspecting in the console what is the id of the widget container.

#twitter-widget-0{ width:100%; }

回答4:

This solution works for me.

Basically, you have to inject some css into your twitter widget iframe.

This example use jQuery

<style type="text/css" id="twitter-style">
  .timeline { max-width: 100%; }
</style>

<script type="text/javascript">
twttr.widgets.createTimeline(
          'WIDGET_ID_GO_HERE',
          $('#widget-placeholder-go-here')[0],
          {
            chrome: 'nofooter noborders noheader' //optional
          }
        ).then(function(el) {
          $(el).contents().find('head').append($('#twitter-style'));
        });
</script>

回答5:

The described solution with shadow seems to apply only to Chrome. For other Browsers it is posible to manipulte the with by javascript. Here is an Example with jQuery.

jQuery(window).load(function () {
    jQuery('.twitter-tweet').contents().find('.EmbeddedTweet').css({
            maxWidth: "960px", width: "100%"
    });
});

回答6:

Unfortunately the above solutions didn't work for me, it only worked when I queried shadowRoot and execute with delay after the tweet loads:

Javascript

setTimeout((function() {
  return $('.twitter-tweet').each(function() {
    return $(this.shadowRoot).find('.EmbeddedTweet').css({
      width: '99%',
      maxWidth: '100%'
    });
  });
}), 2000);

Coffeescript

setTimeout (->
  $('.twitter-tweet').each () ->
    $(this.shadowRoot).find('.EmbeddedTweet').css
      width: '99%'
      maxWidth: '100%'
), 2000

回答7:

For anyone who is wondering why these solutions sometimes don't work; it's because twitter cards has a title and content with white-space:nowrap

But don't worry, this is the only code you will need to use, because it covers all cases (atm):

#twitter-widget-0,#twitter-widget-1{ width:100%; }

twitterwidget::shadow .SummaryCard-content *{white-space:normal !important;}

twitterwidget::shadow .resize-sensor{display:none !important;width:0px !important;overflow:hidden !important;}

来源：https://stackoverflow.com/questions/25275923/forcing-embedded-tweet-to-100-width