5

Google ChromeとFirefoxの両方でwhite-space: nowrap;insideの使用に問題があります（IEは希望どおりに動作します）。fieldset

私がしたいのは、1行のテキストだけが表示され、余分な部分は非表示にされ、省略記号が追加されることです。divこれは、私が外にいるときに言及した3つのブラウザすべてで機能しますが、fieldset内に移動するとすぐに機能しなくなります。

以下のスクリーンショットは、「機能している」場合と「機能していない」場合の両方を示しています。

スクリーンショット

下部div（の外側fieldset）には、div展開ではなくテキストの切り捨てが必要な効果があります。

なぜこれが起こっているのですか、それを防ぐために何をする必要がありますか？

スクリーンショットに関連するHTMLは以下のとおりです。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body style="background-color: #ccc;">
    <form action="">
    <div id="outer" style="background-color: #fff; width: 50%">
        <fieldset>
            <legend>Foo</legend>
            <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi posuere, elit id
                lobortis ultricies, mi velit dictum libero, pharetra dapibus libero lectus vel nibh.
                Mauris sem dolor, auctor vitae accumsan lacinia, rhoncus non mauris. Morbi ac mi
                eros, eu pretium massa. </div>
        </fieldset>
         <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi posuere, elit id
                lobortis ultricies, mi velit dictum libero, pharetra dapibus libero lectus vel nibh.
                Mauris sem dolor, auctor vitae accumsan lacinia, rhoncus non mauris. Morbi ac mi
                eros, eu pretium massa. </div>
    </div>
    </form>
</body>
</html>
4

2 に答える 2

1

別の質問の回答によるとfieldset、これを機能させるには幅を設定する必要があります。幅を設定すると、すべてが正しく機能します。

違いを確認するには、このフィドルを参照してください。

于 2013-02-22T23:33:15.760 に答える
1

私が正しく思い出せば、コードをテストしなかったword-wrap: break-word;代わりに使用する必要がありwhite-space: nowrap;ますが、デモを確認して動作すると確信していますhttp://jsfiddle.net/u3Q3p/1/

于 2012-04-17T06:38:35.137 に答える