强制DIV的内容不要换行

Question

我这样定义了DIV：

<div id="divContent" class="content" style="margin-left:239px;min-height: 100%; padding: 130px 80px 30px 80px; overflow: hidden;">

div的内容复杂多变，包括许多不同的html和css。我想要的是强制div的内容不要换行，这样当你将浏览器窗口的右边缘向左边缘拖动时，内容可能会从右侧消失，但永远不会换行。

我已经尝试在divContent div上应用这个CSS，也在divContent里面的子div上应用这个CSS，但它没有做任何事情：

white-space: nowrap

我有哪些选择？

＆LT;＆LT;编辑＆gt;＆gt;

这是实际的web page。

以下是在缩小页面之前（正确）的外观：

以下是在缩小页面后它看起来（错误地）的样子，它开始包装：

Answer 1

将overflow:hidden添加到元素的样式中，将导致任何流出div的文本被隐藏。您应将其删除并将其替换为white-space:nowrap

<div id="divContent" class="content" 
     style="margin-left:239px;min-height: 100%; 
            padding: 130px 80px 30px 80px; white-space:nowrap;">

Answer 2

好的，谢谢你添加一个代码链接。我的，你在那个div里有很多东西吗？ （总是有助于给出完整的图片问题！）这就是问题 - 特别是标签/输入字段对。这些是在dd元素内部，它们位于div = class-column-thirds的div中。它有一个百分比宽度，这意味着它们会随着窗口缩小而缩小。

但是当列的宽度缩小时，没有什么可以阻止输入字段在其标签下面掉落。这就是你需要停下来的东西。添加nowrap到它们的包含元素（DD元素），以及一个宽度以阻止标签和字段溢出DD元素的末尾，应该这样做：

dd { 
    white-space: nowrap; 
    width : 400px; /* choose your width here to be wider than the label + field */
} 

停止这些物品包装。 （并检查标签或输入字段上是否没有浮动属性，这也可能是问题的一部分）。

[进一步编辑]

不幸的是，您的设置相当复杂。所以要显示nowrap解决方案基本上是正确的：做一个小测试，银行页面只包含你的一个标签字段对：

<dl><dd>
    <label for="txtFirstName" id="lblFirstName" title="First Name" data-required="true">First Name</label>
    <input name="txtFirstName" type="text" value="Frankie8" id="txtFirstName" data-capture="DLFirstName" style="width:131px" />
</dd></dl>

和一些CSS：

dd {
    margin-left: 400px;
    border:2px solid black; 
    white-space: nowrap;
}

然后缩小窗口直到右边的窗口边缘与场重叠，然后注释出白色空间线;你会看到标签下面的字段下拉。 （我试过了，它按预期工作）。希望这表明要解决的基本问题是什么。

然而，通过查看CSS文件，我看到你在LESS文件Style.less（查找1976年左右的@media）中有一个媒体查询，它使用display：block将标签重新定义为块元素。这阻止了上述nowrap解决方案的工作。标签通常是内联元素。因此，如果可以，您需要能够摆脱显示更改，或者找到其他解决方案。

另一种解决方案是给出包含div（class = column-thirds），一个min-width来阻止它们收缩，以至于它们首先引起你的包装问题。我能想到的唯一另一件事可能是浮动标签，但我不想打赌这会是怎么回事。

我希望这一切都可以帮助您获得适合您问题的解决方案。

Answer 3

您需要将宽度设置为您希望div的大小，以px为单位，例如：

... width: 500px; ...

然后，如果屏幕变窄，则无论溢出设置如何，div都将根据需要从屏幕右侧消失。 这样的问题通常有助于临时给出所有div边界，例如：border 1px solid red;所以你可以看到发生了什么。

如果您同时修复了div的宽度和高度，并且文本太长而无法容纳在该框中，则溢出才会发挥作用 - 然后它将向下扩散到div下方。白色空间看起来好像有效，因为它会使文本粘在一条线上，直到你给div一个边框并意识到div仍然在屏幕的边缘结束（无论在任何给定时刻都是宽的）并且文本现在超出了div的末尾（如果添加边框，可以看到，并删除隐藏的溢出）。

因此，如果操作正确，修复div的宽度应该有效（我已经使用了500px，但将其更改为您想要的任何内容）：

<div id="divContent" class="content" style="width: 500px; margin-left:239px;min-height: 100%; padding: 130px 80px 30px 80px; overflow: hidden;">

然而，很大程度上取决于你在div中的内容，以及他们拥有的CSS，所以如果修复这样的宽度并不起作用，请给我们这些。