草庐IT

javascript - 强制嵌入推文为 100% 宽度

coder 2024-07-22 原文

我试图通过将其宽度设置为 100% 来强制嵌入的推文响应。

我尝试按如下方式调整内联宽度:

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

我还尝试按如下方式设置 twitter-tweet 类的样式:

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

这两种方法都失败了。这是否只是被 Twitter 要求包含在推文嵌入中的脚本覆盖？ (脚本可引用http://platform.twitter.com/widgets.js。)

如果您能帮助强制嵌入到 100% 宽度，我们将不胜感激。

最佳答案

自 2016 年 5 月起，Twitter 使用其他嵌入 HTML。看起来像这样。他们放弃了 iFrame 集成。

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

在 DOM 中，您会在 twitterwidget 打开标签后找到一个名为 #shadow-root 的元素(在 Chrome 检查器 中查看)。从现在开始，可以通过 css 和伪元素影子来操纵所有 Twitter Ebend。

宽度示例:

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

例子 - https://jsfiddle.net/86dc9y5t/

请勿在产品页面上使用: - https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM

关于javascript - 强制嵌入推文为 100% 宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25275923/

javascript100%twittercodesectioncssresponsive-design

有关javascript - 强制嵌入推文为 100% 宽度的更多相关文章

  1. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  2. ruby - 强制浏览器下载文件而不是打开文件 - 2

    我要下载http://foobar.com/song.mp3作为song.mp3，而不是让Chrome在其native中打开它浏览器中的播放器。我怎样才能做到这一点？ 最佳答案 您只需要确保发送这些header:Content-Disposition:attachment;filename=song.mp3;Content-Type:application/octet-streamContent-Transfer-Encoding:binarysend_file方法为您完成:get'/:file'do|file|file=File.

  3. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  4. ruby - 强制 Ruby 不以标准形式/科学记数法/指数记数法输出 float - 2

    我遇到了同样的问题here对于python，但对于ruby​​。我需要输出这样一个小数字:0.00001，而不是1e-5。有关我的特定问题的更多信息，我正在使用f.write("Mynumber:"+small_number.to_s+"\n")输出到一个文件对于我的问题，准确性不是什么大问题，所以只做一个if语句来检查是否small_number那么更通用的方法是什么？ 最佳答案 f.printf"Mynumber:%.5f\n",small_number您可以将.5(小数点右侧5位数字)替换为您喜欢的任何特定格式大小，例如，%8

  5. ruby-on-rails - 如何在 Rails 脚手架生成器上强制使用单数表名？ - 2

    我正在使用遗留数据库并需要创建一些CRUD。我如何使用scaffold生成器并告诉他表的确切名称以避免复数化过程？表格也是西类牙语。 最佳答案 您可以只使用ActiveRecord::Base.table_name=方法手动设置表名。因此，在您的模型中您可以:classOrderDetail 关于ruby-on-rails-如何在Rails脚手架生成器上强制使用单数表名？，我们在StackOverflow上找到一个类似的问题： https://stackove

  6. ruby - 强制使用特定的 gem 版本作为默认版本？ - 2

    假设我安装了三个gem:package-0.4.0、package-0.5.0和package-0.5.0-jbfink(我构建了-jbfink一个，因为我对0.5做了非常小的改动.0的来源，并希望将其与官方版本区分开来)。是否有gem(或其他命令)将其设为默认值？现在我已经安装了所有三个，但我的shell正在从package-0.5.0中获取可执行文件，我宁愿它默认为0.5.0-jbfink。将0.5.0-jbfink命名为0.5.1解决了这个问题，但我不想这样做，因为我不想与正式发布的0.5.1出现冲突。 最佳答案 转到conf

  7. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  8. ruby - 无法将 BigDecimal 强制转换为 BigDecimal - 2

    这应该很简单，但它正在爆炸。有什么想法吗？d=BigDecimal.new("2.0")YAML::load({:a=>d}.to_yaml)TypeError:BigDecimalcan'tbecoercedintoBigDecimalfrom/Users/benjohnson/.rvm/rubies/ruby-1.9.3-p125/lib/ruby/1.9.1/irb/inspector.rb:86:in`inspect'from/Users/benjohnson/.rvm/rubies/ruby-1.9.3-p125/lib/ruby/1.9.1/irb/inspector.rb

  9. ruby - 如何强制 Rack :session + sinatra to read "rack.session" from params instead of cookies - 2

    我正在处理oauth1.0(twitter和flickr)。网站工作在80端口，oauth服务器工作在8080端口算法:向oauth服务器发送ajax请求以检查用户是否有有效的access_token如果用户没有access_token或access_token已过期，则打开授权窗口在oauth服务器的用户session中保存access_token发送分享数据到oauth服务器它使用sinatra+rack:session+rack::session::sequel+sqlite来存储session。它在每个响应中发送Set-Cookie:rack.session=id我正在使用2种

  10. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

随机推荐