nowrapのある要素は、webkitの隣接する要素に貼り付けられます

StackOverflow https://stackoverflow.com/questions/2392344

  •  25-09-2019
  •  | 
  •  

質問

私は持っています ul 私が水平方向のメニューとして表示するリスト。それぞれのコンテンツが欲しいです li 1つの行にとどまることは、全体として li 必要に応じてラインをジャンプするアイテム。何かのようなもの：

First entry in the menu Second menu entry
These words are short, the LI jumps lines, but doesn't wrap
Yet anoter] [And more] [Some more]

論理的に、私はただ置くだけです li {white-space:nowrap;}, 、しかし、WebKitブラウザには問題があります。 Nowrapのあるアイテムは、隣接するアイテムに貼り付けられます。 したがって、上記の場合、すべて li 同じラインになります。

同じことが孤立した要素にも当てはまります nowrap ラッピングテキストブロック内。 

<p>Visit my sites <a href="http://gabrielradic.com/" style="white-space:nowrap">Gabriel Radic
.com (English)</a> or <a href="http://www.timbru.com/" style="white-space:nowrap">Timbru Blog
(Romanian)</a>.

私が期待するのは、次のようなものです。

私のサイトにアクセスしてください Gabriel Radic .com また
Timbruブログ

代わりに、次のように、2つのリンクが一緒になってしまいます。

私のサイトにアクセスしてください
Gabriel Radic .com また Timbruブログ（ルーマニア語）

Safari、Chromeなどに人々の肘をつかむのをやめるように伝える良い方法はありますか？

助けてくれてありがとう。

役に立ちましたか？

解決

使用する代わりに white-space:nowrap, 、この場合、一緒に行く方が適切です display:inline-block.

CSSは変更のためにあちこちに適応する必要がありますが、予想どおりに機能します。

他のヒント

それで、私が正しく理解しているなら、あなたはリスト項目内のテキストを包む必要がありますが、メニュー自体ではありませんか？それが次のように見えるように

item one | item two | item number | item four 
                         three

しかし、それは次のように見えません：

item one | item two | item number three | 
item four

その場合は、設定を試みましたか nowrap 実際に ul リストアイテムの代わりに、それは ul あなたがラップしないようにしていることは？次に、リストアイテムの幅を設定して、その幅に合うようにラップします。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top