HTML + CSS：divコンテンツを強制的に1行に収めるには？

div定義された内に長いテキストがありますwidth：

HTML：

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

CSS：

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

文字列を強制的に1行に収める（つまり、「オーバーフロー」の途中でカットする）にはどうすればよいですか？

を使用しようとしましたがoverflow: hidden、役に立ちませんでした。

これを試して：

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

使用white-space:nowrapしてoverflow:hidden

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

あなたのCSSで white-space:nowrap;

あなたのHTMLコード： <div>Stack Overflow is the BEST !!!</div>

CSS：

div {
    width: 100px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

これで結果は次のようになります。

スタックオーバー...

誰もがこれに飛びついた!!! 私もフィドルを作りました：

http://jsfiddle.net/audetwebdesign/kh4aR/

RobAgarはwhite-space:nowrap最初に指摘することでポイントを獲得します。

ここにoverflow: hiddenいくつかありますが、レイアウトに余分な文字が表示されないようにしたい場合に必要です。

また、前述したように、空白を折りたたまないのに対して、white-space: preEnderMBを参照してください。prewhite-space: nowrap

これを試してみてください。これはpre、nowrapこれを同じように実行したいと思うのではなく使用しますが<pre>、どちらでも問題なく機能します。

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

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

私は同じことを探してここにジャンプしましたが、どれもうまくいきませんでした。

何をしているのか、またシステム（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>

これをあなたのdivに追加してください

white-space: nowrap;

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

div {
    display: flex;
    flex-direction: row; 
}

私のために働いた解決策でした div-listsを使用する場合、これが必要になります。

いくつかの代替方向の値はrow-reverse, column, column-reverse, unset, initial, inherit 、あなたが彼らに期待することをするものです

ブロックがテキストに合わせて大きくならないように高さを設定し、overflow: hiddenパラメータを維持してください

編集：2行の高さを表示する必要がある場合の例を次に示します。

div {
    border: 1px solid black;
    width: 70px;
    height: 2.2em;
    overflow: hidden;
}