为什么下例中的元素会自行折叠？
即使该元素设置为 box-sizing: border-box，它的边框仍将保留，但该元素一旦超出其父元素的边界就会失去所有宽度。
这是怎么回事？
let t = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at velit commodo, facilisis ex vitae, viverra tellus.'
let c = 0
const e = document.getElementById('statement-container')
const i = setInterval(function(){
if (t[c] !== ' ') e.innerHTML += t[c]
else e.innerHTML += ' '
c++
if (c >= t.length) clearInterval(i)
}, 100)* {
box-sizing : border-box;
}
body {
width : 100vw;
height : 100vh;
margin : 0;
}
section:first-child {
width : 40vw;
height : 100vh;
position : relative;
left : 30vw;
display : flex;
border : solid blue 1px;
}
#statement-container, #caret {
height : 15%;
position : relative;
top : calc(50% - 7.5%);
}
#statement-container {
z-index : 98;
font-family : beir-bold;
font-size : 6.5vmin;
color : red;
}
#caret {
z-index : 99;
width : 10%;
border : solid green 5px;
background : orange;
}<body>
<section>
<div id="statement-container"></div>
<div id="caret"></div>
</section>
</body>
最佳答案
Why does the element in the following example collapse in on itself?
当你使用 display: flex 在 部分 上，它的子项变成 flex 元素。
Flex 元素有一个名为 flex 的属性，它是 flex-grow 的简写, flex-shrink和 flex-basis ，它根据可用空间及其内容控制元素本身的大小。
flex-basis，在本例中为 flex row direction ，这是默认值，控制元素宽度。
默认值是 flex: 0 1 auto 这意味着它不会增长 (0) 超出其内容，这是允许的收缩 (1) 及其flex-basis (auto) 根据其内容调整大小。
因为在这种情况下 width and flex-basis 做同样的事情，这里给 caret 一个 3% 的设置宽度，只要有足够的空间，它就会保持这个宽度，并且不会增长，但是当空间变成负数(元素不再适合)它将开始缩小到它的内容宽度，它没有任何内容宽度，因此它的内容区域完全崩溃。
一种解决方案是通过将 flex-shrink 更改为 0 来告诉它不允许收缩。
let t = 'Nothing is completely perfect.'
let c = 0
const e = document.getElementById('statement-container')
const i = setInterval(function(){
if (t[c] !== ' ') e.innerHTML += t[c]
else e.innerHTML += ' '
c++
if (c >= t.length) clearInterval(i)
}, 100)* {
box-sizing : border-box;
}
body {
width : 100vw;
height : 100vh;
margin : 0;
}
section:first-child {
width : 40vw;
height : 100vh;
position : relative;
left : 30vw;
display : flex;
border : solid blue 1px;
}
#statement-container, #caret {
height : 15%;
position : relative;
top : calc(50% - 7.5%);
}
#statement-container {
font-family : beir-bold;
font-size : 15vmin;
color : red;
}
#caret {
flex-shrink : 0; /* added */
width : 5%;
border : solid green 5px;
background : orange;
} <section>
<div id="statement-container"></div>
<div id="caret"></div>
</section>
关于html - 元素一旦超出父元素的宽度就会失去所有宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46640056/
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
我试图获取一个长度在1到10之间的字符串，并输出将字符串分解为大小为1、2或3的连续子字符串的所有可能方式。例如:输入:123456将整数分割成单个字符，然后继续查找组合。该代码将返回以下所有数组。[1,2,3,4,5,6][12,3,4,5,6][1,23,4,5,6][1,2,34,5,6][1,2,3,45,6][1,2,3,4,56][12,34,5,6][12,3,45,6][12,3,4,56][1,23,45,6][1,2,34,56][1,23,4,56][12,34,56][123,4,5,6][1,234,5,6][1,2,345,6][1,2,3,456][123
在我的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并在看到包时选择
当我的预订模型通过rake任务在状态机上转换时，我试图找出如何跳过对ActiveRecord对象的特定实例的验证。我想在reservation.close时跳过所有验证!叫做。希望调用reservation.close!(:validate=>false)之类的东西。仅供引用，我们正在使用https://github.com/pluginaweek/state_machine用于状态机。这是我的预订模型的示例。classReservation["requested","negotiating","approved"])}state_machine:initial=>'requested
我有这个html标记:我想得到这个:我如何使用Nokogiri做到这一点？ 最佳答案 require'nokogiri'doc=Nokogiri::HTML('')您可以通过xpath删除所有属性:doc.xpath('//@*').remove或者，如果您需要做一些更复杂的事情，有时使用以下方法遍历所有元素会更容易:doc.traversedo|node|node.keys.eachdo|attribute|node.deleteattributeendend 关于ruby-Nokog
我想获取模块中定义的所有常量的值:moduleLettersA='apple'.freezeB='boy'.freezeendconstants给了我常量的名字:Letters.constants(false)#=>[:A,:B]如何获取它们的值的数组，即["apple","boy"]？ 最佳答案 为了做到这一点，请使用mapLetters.constants(false).map&Letters.method(:const_get)这将返回["a","b"]第二种方式:Letters.constants(false).map{|c
我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.
查看我的Ruby代码:h=Hash.new([])h[0]=:word1h[1]=h[1]输出是:Hash={0=>:word1,1=>[:word2,:word3],2=>[:word2,:word3]}我希望有Hash={0=>:word1,1=>[:word2],2=>[:word3]}为什么要附加第二个哈希元素(数组)？如何将新数组元素附加到第三个哈希元素？ 最佳答案 如果您提供单个值作为Hash.new的参数(例如Hash.new([])，完全相同的对象将用作每个缺失键的默认值。这就是您所拥有的，那是你不想要的。您可以改用
我正在学习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)'
