我如何才能迫使div内容停留在一行与HTML和CSS?

我有一个长文本内的div定义宽度:

HTML:

<div>Stack Overflow is the BEST!!!</div>

CSS:

div {
    border: 1px solid black;
    width: 70px;
}

我怎么能迫使字符串保持在一行(即，在“溢出”中间被切断)?

我试着使用overflow: hidden，但是没有用。

当前回答

把这个添加到你的div:

white-space: nowrap;

http://jsfiddle.net/NXchy/1/

2011-03-08 12:19:35

其他回答

试试这个:

div {
    border: 1px solid black;
    width: 70px;
    overflow: hidden;
    white-space: nowrap;
}

2011-03-08 12:20:32

试试吧。它使用pre而不是nowrap，因为我假设你想让它类似于<pre>运行，但两者都可以工作:

div {
    border: 1px solid black;
    max-width: 70px;
    white-space: pre;
}

http://jsfiddle.net/NXchy/11/

2011-03-08 12:23:28

之前的答案对我都没用。

有些情况下，不管你做什么，取决于系统(Oracle Designer: Oracle 11g - PL/SQL)， div总是会转到下一行，在这种情况下，你应该使用span标记。

这对我产生了奇效。

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

2013-08-20 13:15:49

在span中需要添加: {显示:块;｝

跨度{ 宽度:70 px; 边框:1px纯黑色; 显示:块; 溢出:隐藏; 空白:nowrap;} 文本溢出:省略; ｝堆栈溢出是最好的!!< / sapn >

2022-05-25 15:00:09

使用white-space:nowrap和overflow:hidden

http://jsfiddle.net/NXchy/8/

2011-03-08 12:21:22

我如何才能迫使div内容停留在一行与HTML和CSS?

推荐文章

最新文章

标签