我正在尝试将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>