Html 防止环绕 span 或 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/679804/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prevent wrapping of span or div
提问by cgp
I'd like to put a group of divelements of fixed width into a container and have the horizontal scroll bar appeared. The div/spanelements should appear in a line, left to right in the order they appear in the HTML (essentially unwrapped).
我想将一组div固定宽度的元素放入一个容器中并出现水平滚动条。的div/span元件应该出现在一条线上，从左至右以它们出现在HTML（基本上展开）的顺序。
This way the horizontal scroll bar will appear and can be used instead of the vertical scroll bar for reading through the content (left to right).
这样水平滚动条就会出现，并且可以用来代替垂直滚动条来阅读内容（从左到右）。
I've tried floating them in a container and then putting a white-space: nowrapstyle on the container, but alas, it still seems to wrap.
我试过将它们漂浮在一个容器中，然后在容器上放置一个white-space: nowrap样式，但唉，它似乎仍然包裹着。
Ideas?
想法？
It looked like this:
它看起来像这样：
.slideContainer {
white-space: nowrap;
}
.slide {
width: 800px;
float: left;
display: inline;
}<div class="slideContainer">
<div class="slide">Some content</div>
<div class="slide">More content</div>
<div class="slide">Even More content!</div>
</div>UPDATE:
See sitefor examples, but they were wrong about not being another way - I'm sure the article is old though.
更新：
请参阅网站以获取示例，但他们错误地认为不是另一种方式 - 我确信这篇文章已经过时了。
回答by Ron DeVera
Try this:
尝试这个：
.slideContainer {
overflow-x: scroll;
white-space: nowrap;
}
.slide {
display: inline-block;
width: 600px;
white-space: normal;
}<div class="slideContainer">
<span class="slide">Some content</span>
<span class="slide">More content. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
<span class="slide">Even more content!</span>
</div>Note that you can omit .slideContainer { overflow-x: scroll; }(which browsers may or may not supportwhen you read this), and you'll get a scrollbar on the window instead of on this container.
请注意，您可以省略.slideContainer { overflow-x: scroll; }（当您阅读本文时，哪些浏览器可能支持或不支持），您将在窗口上而不是在此容器上看到一个滚动条。
The key here is display: inline-block. This has decent cross-browser supportnowadays, but as usual, it's worth testing in all target browsers to be sure.
这里的关键是display: inline-block。这在当今具有不错的跨浏览器支持，但像往常一样，值得在所有目标浏览器中进行测试以确保。
回答by Demolishun
It works with just this:
它仅适用于：
.slideContainer {
white-space: nowrap;
}
.slide {
display: inline-block;
width: 600px;
white-space: normal;
}
I did originally have float : left;and that prevented it from working correctly.
我最初确实有float : left;，这阻止了它正常工作。
Thanks for posting this solution.
感谢您发布此解决方案。
回答by brandonscript
Particularly when using something like Twitter's Bootstrap, white-space: nowrap;doesn't always work in CSS when applying padding or margin to a child div. Instead however, adding an equivalent border: 20px solid transparent;style in place of padding/margin works more consistently.
特别是使用类似Twitter的时候引导，white-space: nowrap;并不总是在CSS应用填充或保证金，以一个孩子的时候工作div。然而，添加等效border: 20px solid transparent;样式代替填充/边距更一致。
回答by jthompson
As mentioned you can use:
如前所述，您可以使用：
overflow: scroll;
If you only want the scroll bar to appear when necessary, you can use the "auto" option:
如果您只想在必要时显示滚动条，可以使用“自动”选项：
overflow: auto;
I don't think you should be using the "float" property with "overflow", but I'd have to try out your example first.
我认为您不应该将“浮动”属性与“溢出”一起使用，但我必须先尝试您的示例。
回答by ólafur Waage
Looks like divs will not go outside of their body's width. Even within another div.
看起来 div 不会超出其身体的宽度。即使在另一个 div 中。
I threw this up to test (without a doctype though) and it does not work as thought.
我把它扔到测试中（虽然没有文档类型），但它不像想象的那样工作。
.slideContainer {
overflow-x: scroll;
}
.slide {
float: left;
}<div class="slideContainer">
<div class="slide" style="background: #f00">Some content Some content Some content Some content Some content Some content</div>
<div class="slide" style="background: #ff0">More content More content More content More content More content More content</div>
<div class="slide" style="background: #f0f">Even More content! Even More content! Even More content!</div>
</div>What i am thinking is that the inner div's could be loaded through an iFrame, since that is another page and its content could be very wide.
我在想的是内部 div 可以通过 iFrame 加载，因为那是另一个页面，它的内容可能非常宽。
