問題タブ [nowrap]

リンクのリストを含むサイドバーがあり、各リンクの右側に矢印アイコンがあります (:after セレクターを使用してアンカー スタイルで設定します)。多くのリンクで、矢印が独自の行にドロップダウンしています。テキストが必要に応じて新しい行に分割できることを確認したいのですが、矢印が単独で行に孤立しないようにします。

:after 疑似要素で「空白: nowrap」を使用することで問題を解決したと思いました。これは Firefox で機能したためです。残念ながら、IE8、Chrome、Safari では動作しないことがわかりました。

Firefox、IE8、Chrome、および Safari で、必要に応じてリンク内のテキストを折り返すことを許可しながら、リンク アイコンが独自の行に分割されないようにする方法はありますか?

基本的な HTML 構造:

スタイル ルール (sass で記述):

コンテナ div にいくつかのリストを並べて表示しています。コンテナ div は 100% の幅である必要があります。

コンテナー内のすべてのリストは、ブラウザーの幅を超えた場合にウィンドウからはみ出す必要があります。

これを希望どおりに機能させる唯一の方法は、コンテナに固定のピクセル幅を与えることです。

私は立ち往生しており、それは単純なものだと確信しています。

参照してください: http://jsfiddle.net/sPKEp/7/

iscroll js lib を使用して、css で流動的なナビゲーションを構築しています。これで、firefox と chrome ですべてがスムーズになりました。唯一の問題はつまりです。

基本的に、ラップしたり壊したりしたくない流動的なdivを持っています。つまり、壊れます..空白を使用しています：nowrap css属性。

互換性は ie8+ のみです。

HTMLコード：

CSS:

と

動作のいくつかの画面:

（クロム）

(すなわち)

ご協力ありがとうございました！

What is wrong with this? Ive read a couple of posts which suggest that in order to have inline-block elements all on the same line with only overflow-x, the following CSS is all that is required on the parent:

This is my CSS, straight from my firebug for both the parent, and the elements which i need on the same line. The elements are wrapping with only a vertical overflow. Im confused. Any suggestions?

 単語を壊したくない場合 (テーブル ヘッダーなど) に単語間を使用する習慣があることは認めます。

本当に要素を でスタイルする必要がありwhite-space:nowrapますか? 私がしようとしている唯一のことが単語をラップしないようにすることである場合、どちらにも利点/欠点はありますか?

これ欲しい ：

しかし、私はこれを取得します：

これを使用して、含まれているdivのスタイルを設定します。

残りはここには何もありません：http： //jsfiddle.net/n2LtN/

何が欠けている？

次の HTML コードがあります。

ご覧のとおり、ブラウザー ウィンドウのサイズに関係なく、文が 1 行に収まるように "white-space:nowrap" を挿入しました。ただし、文の一部の単語をイタリック体にすると、これが発生しなくなるようです。小さいブラウザ ウィンドウでは、結果は 1 行に「this is just a」、次の行に「 test statement 」となります。文が常に 1 行に収まるようにするにはどうすればよいですか?

1行に表示する必要があり、合計幅がページ幅よりも大きい画像（3）がいくつかあります。しかし、とにかくそれらをオーバーラップさせたいので、ページ幅は重要ではありません。しかし、何らかの理由で、1行に2つの画像、次の行に3番目の画像しか表示されません。これを整理するにはどうすればよいですか。私が.imageContainerasposition:aboluteを作成し、left:--px各IDに値を指定すると、これらは完全に機能します。しかし、それを維持し、調整することは難しいでしょう。また、各画像の幅を狭くすると正しく整列しますが、それはしたくありません:(。助けてください。

white-space:nowrap;allImagesContainerに配置されたUPDATEはこの問題を解決しましたが、Chromeでのみです。この問題はFFとIEでも解決しません。

コードは次のとおりです。

そして、これがスタイリングです：

divコンテンツが単なるテキストではない場合、たとえば複数のボタンの場合、コンテンツのラップを回避する方法はありますか?

私はこのような構造を持っています:

CSSで

左のセルの幅は常に 60% で、右のセルは他のすべてのスペースを取る必要があります。「ヒント」要素が表示されている場合と表示されていない場合の両方で、右側のセルの長い一行テキストは省略記号で切り詰める必要があります。

display: inline、float: left、を使用しようとしましたposition: absoluteが、右側の浮動ヒント要素を台無しにしないような結果は得られませんでした。

jsFiddle はこちら: http://jsfiddle.net/Z2kLV/1/

また、解決策はクロスブラウザーである必要はありません。クロムにのみ必要です。

助けてください、私はこれを成し遂げることができません