问题
我有一个 <select>其中之一是<option>的文本值很长。我想要 <select>调整大小使其永远不会比其父级宽，即使它必须切断其显示的文本。 max-width: 100%应该这样做。
调整大小前:
调整大小后我想要什么:
但是如果你 load this jsFiddle example 并将结果面板的宽度调整为小于 <select> 的宽度，可以看到<fieldset>里面的select无法缩小其宽度。
调整大小后我实际看到的内容:
然而，equivalent page with a <div> instead of a <fieldset> 正确缩放。你可以看到和test your changes more easily如果您有 a <fieldset> and a <div> next to each other on one page .如果您 delete the surrounding <fieldset> tags ，调整大小有效。 <fieldset>标签以某种方式导致水平调整大小中断。<fieldset>行为就像有一个 CSS 规则 fieldset { min-width: min-content; } . ( min-content 粗略地表示，不会导致 child 溢出的最小宽度。)如果我替换 <fieldset>与 <div> with min-width: min-content ，看起来完全一样。然而，min-content 没有规则。在我的样式中，在浏览器默认样式表中，或在 Firebug 的 CSS Inspector 中可见。我试图覆盖 <fieldset> 上可见的所有样式在 Firebug 的 CSS Inspector 和 Firefox 的默认样式表中 forms.css ，但这没有帮助。特别覆盖 min-width和 width也没做什么。
代码
字段集的 HTML:
<fieldset>
<div class="wrapper">
<select id="section" name="section">
<option value="-1"></option>
<option value="1501" selected="selected">Sphinx of black quartz, judge my vow. The quick brown fox jumps over the lazy dog.</option>
<option value="1480">Subcontractor</option>
<option value="3181">Valley</option>
<option value="3180">Ventura</option>
<option value="3220">Very Newest Section</option>
<option value="1481">Visitor</option>
<option value="3200">N/A</option>
</select>
</div>
</fieldset>
fieldset {
/* hide fieldset-specific visual features: */
margin: 0;
padding: 0;
border: none;
}
select {
max-width: 100%;
}
width属性到 the defaults什么也没做:fieldset {
width: auto;
min-width: 0;
max-width: none;
}
/* try lots of things to fix the width, with no success: */
fieldset {
display: block;
min-width: 0;
max-width: 100%;
width: 100%;
text-overflow: clip;
}
div.wrapper {
width: 100%;
}
select {
overflow: hidden;
}
<select>不是问题 – 内联块 div也无法调整大小。虽然这个例子更复杂，但我认为上面简单案例的修复也将修复这个更复杂的案例。div.wrapper { width: 50%; } , <fieldset>此时停止调整自身大小，然后是全尺寸 <select>会撞到视口(viewport)的边缘。调整大小就像 <select>有 width: 100% ，即使 <select>看起来它有 width: 50% .
<select> itself width: 50% ，该行为不会发生；宽度设置正确。
<fieldset> .但我想知道，如果真的不可能制作 <fieldset>显示正确，这是为什么？什么在 <fieldset>的 spec或 default CSS ( as of this question ) 导致这种行为？这种特殊行为可能在某处记录在案，因为多个浏览器都是这样工作的。<fieldset> 中。 .在智能手机上(或者如果您使浏览器窗口变小)，带有 <fieldset> 的页面部分比表格的其余部分宽得多。大多数形式都很好地限制了其宽度，但带有 <fieldset> 的部分不会，强制用户缩小或向右滚动以查看该部分的所有内容。<fieldset> 持谨慎态度，因为它是在大型应用程序的许多页面上生成的，我不确定 CSS 或 JavaScript 中的哪些选择器可能依赖于它。fieldset example在不同的浏览器上。它实际上已经在这些浏览器中工作了:.ie8和 .oldie到 <html>元素。如果您需要解决 IE 中的样式差异，您可以在 CSS 中使用这些类。添加的类与 this old version of HTML5 Boilerplate 中的相同.
最佳答案
更新(2017 年 9 月 25 日)
Firefox bug下面描述的内容自 Firefox 53 起已修复，此答案的链接终于是 removed from Bootstrap's documentation .
另外，我向 Mozilla 贡献者致以诚挚的歉意，他们不得不阻止移除对 -moz-document 的支持。部分原因是这个答案。
修复
在 WebKit 和 Firefox 53+ 中，您只需设置 min-width: 0;在字段集上覆盖默认值 min-content .¹
尽管如此，Firefox 在字段集方面还是有点……奇怪。要在早期版本中使用此功能，您必须更改 display字段集的属性为以下值之一:
table-cell (推荐) table-column table-column-group table-footer-group table-header-group table-row table-row-group table-cell .两者 table-row和 table-row-group阻止您更改宽度，而 table-column和 table-column-group防止你改变高度。@-moz-document — Mozilla's proprietary CSS extensions 之一— 对其他浏览器隐藏它:@-moz-document url-prefix() {
fieldset {
display: table-cell;
}
}
display设置的值在 separate code path 中计算，完全绕过了强加于字段集的强制最小宽度。@-moz-document安全的？@-moz-document在 Firefox 的所有版本中都能按预期工作，直到 53，此错误已修复。@-moz-document to user/UA stylesheets 的错误依赖于首先修复的底层字段集错误。@-moz-document在 CSS 中定位 Firefox ，尽管有其他资源。³关于html - <fieldset> 调整大小错误；似乎有不可移除的 `min-width: min-content`，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17408815/
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据，就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理？我没有在文档中找到任何内容。 最佳答案 我遇到了同样的问题；这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML，但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中，将我的XML代码修改为
我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion在首页我有:汽车:VolvoSaabMercedesAudistatic_pages_spec.rb中的测试代码:it"shouldhavetherightselect"dovisithome_pathit{shouldhave_select('cars',:options=>['volvo','saab','mercedes','audi'])}end响应是rspec./spec/request
我使用Nokogiri(Rubygem)css搜索寻找某些在我的html里面。看起来Nokogiri的css搜索不喜欢正则表达式。我想切换到Nokogiri的xpath搜索，因为这似乎支持搜索字符串中的正则表达式。如何在xpath搜索中实现下面提到的(伪)css搜索？require'rubygems'require'nokogiri'value=Nokogiri::HTML.parse(ABBlaCD3"HTML_END#my_blockisgivenmy_bl="1"#my_eqcorrespondstothisregexmy_eq="\/[0-9]+\/"#FIXMEThefoll
我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.
我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'
我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。 最佳答案 这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda