如何使一个DIV不换行？

Question

我需要创建一个包含多个其他 DIV 的容器 DIV 样式。要求是如果浏览器窗口缩小，这些 DIV 不会换行。

我尝试以下方式实现。

<style>
   .container
   {
      min-width: 3000px;
      overflow: hidden;
   }
   .slide
   {
      float: left;
   }
</style>
<div class="container">
   <div class="slide">something</div>
   <div class="slide">something</div>
   <div class="slide">something</div>
   <div class="slide">something</div>
</div>

这在大多数情况下是可行的。然而，在某些特殊情况下，渲染会出现错误。我发现在IE7的RTL中，容器DIV的宽度变为3000px，并且变得混乱。

是否有其他方法使容器DIV不换行？

- Morgan Cheng

---

我在我的代码中添加了这个标签：white-space: nowrap; 和这个标签：text-overflow: ellipsis; - saber tabatabaee yazdi

Answer 1

尝试在容器样式中使用 white-space: nowrap;（而不是 overflow: hidden;）

- notkwite

Answer 2

如果我不想定义最小宽度，因为我不知道有多少元素，唯一有效的方法是：

如果我不想定义最小宽度，因为我不知道有多少元素，唯一有效的方法是：

如果我不想定义最小宽度，因为我不知道有多少个元素，唯一有效的方法是：

display: inline-block;
white-space: nowrap;

但只在Chrome和Safari中出现 :/

- fguillen

Answer 3

对我来说，以下内容不浮动（为了视觉效果，我稍微修改了您的示例）：

.container
{
    white-space: nowrap; /*Prevents Wrapping*/
    
    width: 300px;
    height: 120px;
    overflow-x: scroll;
    overflow-y: hidden;
}
.slide
{
    display: inline-block; /*Display inline and maintain block characteristics.*/
    vertical-align: top; /*Makes sure all the divs are correctly aligned.*/
    white-space: normal; /*Prevents child elements from inheriting nowrap.*/
    
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 5px;
}

<div class="container">
   <div class="slide">something something something</div>
   <div class="slide">something something something</div>
   <div class="slide">something something something</div>
   <div class="slide">something something something</div>
</div>

div元素之间可能会有间隔。如果您不想要这个间隔，请使用margin-right:-4px;代替margin: 5px;应用于.slide（虽然这样做很丑陋，但是这是一个棘手的问题）。

- JSideris

---

很棒的答案。我在看到你的答案后添加了一个类似的示例，但随后将其删除了。如果您不必支持IE9，则还可以使用flexbox： https://jsfiddle.net/7gsrb38L/1/ - ValentinVoilean

如果您想要在</div><!-- --><div class="slide">之间删除额外的空格，可以使用HTML注释。inline-block样式会将代码中的空白字符作为HTML文档中的空格处理。 - Jo.

@Jo. 为了减小页面大小，你可以使用一些不会被渲染的东西，例如在使用 PHP 时：</div><?php ?><div class="slide"> 在源代码中呈现为 </div><div class="slide">。 - luukvhoudt

另外，如果您使用 JavaScript 生成 HTML，则可以避免空格。我使用 DOThtml。上述的 HTML 可以被替换为以下内容：dot("body").div(dot.iterate(4, function(i){return dot.div("something something something something").class("slide");})).class("container")。 - JSideris

Answer 4

你需要的组合是

white-space: nowrap

在父元素上

display: inline-block; // or inline

关于子元素

- dansch

Answer 5

以下方法适用于我：

.container {
  display: inline-flex;
}

.slide {
  float: left;
}

<div class="container">
  <div class="slide">something1</div>
  <div class="slide">something2</div>
  <div class="slide">something3</div>
  <div class="slide">something4</div>
</div>

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

- Turako

---

这个overflow:hidden对我非常有效。谢谢。 - Alfie

Answer 6

overflow: hidden可以给你正确的行为。我的猜测是，因为你在封装的

上使用了float: left，所以RTL出现了混乱。

除了这个bug，你得到了正确的行为。

- Yuval A

---

我会检查一下是否是由于封装的div上使用了"float:left"。但是，同样的代码在Firefox和Safari上运行良好，只有IE上出现问题。因此，我真的怀疑这是原因。 - Morgan Cheng

Answer 7

使用 display:flex 和 white-space:nowrap

p{
  display:flex;
  white-space:nowrap;
  overflow:auto;
}

<h2>Sample Text.</h2>

<p>Some example text that will not wrap..lla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum d</p>

<h3>Then some other text</h3>

- Kishore

---

我认为white-space与display: flex无关。我成功地只使用了white-space: nowrap。 - Brian Underwood

@BrianUnderwood，当子元素的宽度总和超过100％时，这很有帮助。请参考此帖子，其中flex的特定行为是不需要的：https://dev59.com/s10a5IYBdhLWcg3wH1ly - Guillaume

Answer 8

以上方法都不适用于我。

在我的情况下，我需要将以下内容添加到我创建的用户控件中：

display:inline-block;

- J-DawG

Answer 9

针对IE浏览器，建议使用width: 3000px;。

- Andres GR

Answer 10

你可以使用

标签

。

display: table;

为了避免使用 overflow: hidden;，建议使用此方法对您的容器进行包装。如果仅用于包装目的，则应该可以胜任。

- Paka