問題タブ [nowrap]

現在メールテンプレートを作成中です。テンプレートには、隣同士に並んだ USP が含まれています。これは私が使用しているコードです:

「nowrap」を使用して、スマートフォンで USP を相互に配置しようとしています。残念なことに、USP のすべてが隣り合って立っているため、テーブルが広くなります。

小さな画面でそれらを互いの下に立たせるための簡単なインライン CSS トリックはありますか?

Mozilla Firefox で URL の改行を防ぐにはどうすればよいですか。CSSホワイトスペースの使用: nowrap; ? 他の解決策はありますか？ありがとう。

http://codepen.io/anon/pen/VeNJKW

3 列のフレックスボックス レイアウトを設定しようとしています。左右の列の幅は固定です。中央の列は、使用可能なスペースを埋めるために流動的な幅になっていますが、長いテキストが含まれているため、折り返して省略記号を使用する必要はありません。

残念ながら、ラップされていないテキストでは、列が使用可能なスペースを確保できず、レイアウト全体が親要素の境界を越えて押し出されます。

フィドルへのリンク: http://jsfiddle.net/2Lp8d80n/

どんな助けでも大歓迎です。

その中にdivいくつかのコンテンツがあり、white-space: nowrap;これが発生したときdivに同じサイズのままに設定されています。divページの右側に浮かんでいるコンテンツの最後まで、意志がラップし続けるようにするにはどうすればよいですか?

設定した最大幅と黄色の背景を持つ div があります。その div には、2 セットのラジオ ボタン (各セットに 5 つのボタン) を配置し、それぞれに関連付けられたラベルを付けました。

ラジオボタンの間、または関連するテキストとラジオボタンの間で、セットを 2 行で分割したくありません。そのため、各セットの範囲で 'white-space:nowrap' を使用します。一方、2 つの長いセットが次々とある場合は、2 番目のセットが自動的に次の行に移動するようにします。

私が見るものは興味深いものです。画面の中央に黄色の背景を持つ div がありますが、両方のラジオボタン セットが同じ行にあります。右端のラジオボタン セットは黄色の領域から始まり、それを超えて背景に広がっています。デモンストレーション用に jsfiddle を作成しました。https://jsfiddle.net/03jLe0x1/ に あります。 コードも次のとおりです。

長い単語を使用すると、ellipsis単語が壊れて別の行に移動します。1行にまとめられないようです。私は試してみました。何か案は？id:[ ]white-space: nowrapdisplay: inline-block

https://jsfiddle.net/b35m449x/4/

HTML

CSS

「ハイフン」を「自動」に設定すると、「空白: nowrap」よりも優先されるようになりました。以前のバージョンの Chrome (Mac では 54 より前) およびその他のブラウザー (FF、Safari、IE) では、「空白: nowrap」がハイフンを上回っているようです。したがって、white-space: nowrap および text-overflow: ellipsis を指定すると、ハイフンの設定に関係なく、テキストが省略記号で切り捨てられることがわかります。

55.0.2883.95(Mac版)からは、ハイフン:オートで空白:ナウラップを指定しても改行するようです。ハイフンとナウラップを同時に指定するのはばかげているように聞こえることに同意します..しかし、これは「新しい」動作であるため、これがバグなのか意図された動作なのかを確認したいと思います.

この問題をテストして、他のブラウザー間で動作を比較するための簡単なフィドルを作成しました。

スクリーンショット:

Mac 55.0.2883.95 (64 ビット) の Chrome