HTML+CSS：如何强制 div 内容保持在一行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5232310/
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
HTML+CSS: How to force div contents to stay in one line?
提问by Misha Moroshko
I have a long text inside a divwith defined width:
HTML:
HTML：
<div>Stack Overflow is the BEST !!!</div>
CSS:
CSS：
div {
border: 1px solid black;
width: 70px;
}
How could I force the string to stay in one line (i.e. to be cut in the middle of "Overflow") ?
我怎么能强迫字符串保持在一行（即在“溢出”的中间被切断）？
I tried to use overflow: hidden, but it didn't help.
我尝试使用overflow: hidden，但没有帮助。
回答by Bazzz
Try this:
尝试这个：
div {
border: 1px solid black;
width: 70px;
overflow: hidden;
white-space: nowrap;
}
回答by anothershrubery
Use white-space:nowrapand overflow:hidden
使用white-space:nowrap和overflow:hidden
回答by Rob Agar
in your css use white-space:nowrap;
在你的 css 中使用 white-space:nowrap;
回答by Bozlur Rahman
Your HTML code:
<div>Stack Overflow is the BEST !!!</div>
CSS:
您的 HTML 代码：
<div>Stack Overflow is the BEST !!!</div>
CSS：
div {
width: 100px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
Now the result should be:
现在结果应该是：
Stack Overf...
回答by Marc Audet
Everybody jumped on this one!!! I too made a fiddle:
每个人都跳上了这个！！！我也做了一个小提琴：
http://jsfiddle.net/audetwebdesign/kh4aR/
http://jsfiddle.net/audetwebdesign/kh4aR/
RobAgar gets a point for pointing out white-space:nowrapfirst.
RobAgar 因white-space:nowrap首先指出而得一分。
Couple of things here, you need overflow: hiddenif you don't want to see the extra characters poking out into your layout.
这里有overflow: hidden几件事，如果您不想看到额外的字符出现在您的布局中，则需要这样做。
Also, as mentioned, you could use white-space: pre(see EnderMB) keeping in mind that prewill not collapse white space whereas white-space: nowrapwill.
此外，如上所述，您可以使用white-space: pre（参见 EnderMB），记住pre不会折叠空白，而white-space: nowrap会。
回答by D?k?ll
I jumped here looking for the very same thing, but none worked for me.
我跳到这里寻找同样的东西，但没有一个对我有用。
There are instances where regardless what you do, and depending on the system (Oracle Designer: Oracle 11g - PL/SQL), divs will always go to the next line, in which case you should use the span tag instead.
在某些情况下，无论您做什么，并且取决于系统（Oracle Designer：Oracle 11g - PL/SQL），div 将始终转到下一行，在这种情况下，您应该使用 span 标记。
This worked wonders for me.
这对我来说创造了奇迹。
<span float: left; white-space: nowrap; overflow: hidden; onmouseover="rollOverImageSectionFiveThreeOne(this)">
<input type="radio" id="radio4" name="p_verify_type" value="SomeValue" />
</span>
Just Your Text ||
<span id="headerFiveThreeOneHelpText" float: left; white-space: nowrap; overflow: hidden;></span>
回答by Mike B
Give this a try. It uses prerather than nowrapas I would assume you would want this to run similarly to <pre>but either will work just fine:
试试这个。它使用pre而不是nowrap我假设您希望它以类似方式运行，<pre>但两者都可以正常工作：
div {
border: 1px solid black;
max-width: 70px;
white-space:pre;
}
回答by stephenmurdoch
add this to your div
将此添加到您的 div
white-space: nowrap;
回答by Pingger Shikkoken
div {
display: flex;
flex-direction: row;
}
was the solution that worked for me. In some cases with div-lists this is needed.
是对我有用的解决方案。在某些使用div-lists 的情况下，这是必需的。
some alternative direction values are row-reverse, column, column-reverse, unset, initial, inheritwhich do the things you expect them to do
一些替代方向值是row-reverse, column, column-reverse, unset, initial, inherit做你期望他们做的事情
回答by Wouter Simons
Try setting a height so the block cannot grow to accommodate your text, and keep the overflow: hiddenparameter
尝试设置一个高度，使块无法增长以容纳您的文本，并保持overflow: hidden参数
EDIT: Here is an example of what you might like if you need to display 2 lines high:
编辑：如果您需要高显示 2 行，以下是您可能喜欢的示例：
div {
border: 1px solid black;
width: 70px;
height: 2.2em;
overflow: hidden;
}
