防止包裹span或div [英] Prevent wrapping of span or div

问题描述

我想将一组固定宽度的div元素放入容器中，并出现水平滚动条. div/span元素应按它们在HTML中出现的顺序(基本上是未包装的)从左到右排成一行.

I'd like to put a group of div elements of fixed width into a container and have the horizontal scroll bar appeared. The div/span elements should appear in a line, left to right in the order they appear in the HTML (essentially unwrapped).

这样，水平滚动条将出现，并且可以代替垂直滚动条用于浏览内容(从左到右).

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

我尝试过将它们浮动在容器中，然后在容器上放置white-space: nowrap样式，但是，它似乎仍然可以包裹.

I've tried floating them in a container and then putting a white-space: nowrap style on the container, but alas, it still seems to wrap.

想法?

它看起来像这样:

.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 site for examples, but they were wrong about not being another way - I'm sure the article is old though.

推荐答案

尝试一下:

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

请注意，您可以省略.slideContainer { overflow-x: scroll; }(浏览器可能会省略或在阅读时可能不支持)，并且您会在窗口上而不是在此容器上看到滚动条.

Note that you can omit .slideContainer { overflow-x: scroll; } (which browsers may or may not support when you read this), and you'll get a scrollbar on the window instead of on this container.

此处的键是display: inline-block.如今，它具有体面的跨浏览器支持，但像往常一样，值得在所有目标中进行测试浏览器确定.

The key here is display: inline-block. This has decent cross-browser support nowadays, but as usual, it's worth testing in all target browsers to be sure.

这篇关于防止包裹span或div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！