問題タブ [nowrap]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
2 に答える
9763 参照

css - Firefox CSS nowrap の問題

次のコードを使用して、Web サイトに水平 (改行なし) の順序付けられていない画像のリストを作成しようとしています。

私の CSS では、次のルールを使用しています。

これはChromeでは正しく機能していますが、Firefoxでは機能していません.何らかの理由で誰かがその理由を知っていますか?

編集:明確にするために、FFの問題は、liがまだラップしていることです。私はそれらすべてを、ページの右端から外れる単一の途切れのない水平線に表示しようとしています。

0 投票する
4 に答える
31116 参照

android - Android の複数行 TextView でワード ラップを無効にする

私は高度なスワイプを使用して月ビューに取り組んでいます (各ビューを指にくっつけるには、現在、次、前をロードする必要があります)。

このため、単一の TextView で複数のイベントを表現したいと考えています。ユーザーが月ビュー (小さな画面) でいずれかの日をタップすると、その日の日ビューが開きます。

月ビューの各日 (通常、1 日は画面の幅の 7 分の 1、垂直方向は 7 分の 1 弱) これを避けたい

代わりに私が欲しい

ngが次の行に折り返されるのではなく、切り捨てられていることに注意してください。これが私が探しているものです。

0 投票する
1 に答える
921 参照

html - Operaラップバグ

私は次のhtml/cssを持っています:

「Loremimpsum」の長さが長い場合(9000シンボルを超える場合)、ブレークシンボルがなく、TDにラップおよびオーバーフローディレクティブがない場合でも、Operaブラウザはテキストのラップを開始します。

ここに画像の説明を入力してください

他の有名なブラウザはすべてうまくいきます:

ここに画像の説明を入力してください


可能性はOperaoverflow-y:hiddenでは動作しません。display:table-cell考えられる解決策は、を追加することdisplay:blockです.result_table table td

デモ: http: //jsfiddle.net/qXjV8/

td別の解決策は、div内のテキストをラップし、セレクターを次のように変更することです。.result_table table td div

デモ: http: //jsfiddle.net/qXjV8/1/

どちらの場合も、次のようなリセットcssを使用することをお勧めします:http://meyerweb.com/eric/tools/css/reset/

また、どちらの場合も、Operaの2行目が部分的に表示されていることに気付くでしょう。これを解決するには、line-heightプロパティを使用できます。

0 投票する
1 に答える
4323 参照

css - IE7でのラップなしの問題

HTML:

CSS:

IE 7の結果:

IE7の問題

望ましい結果:

望ましい結果

タグは、ulコンテナの右側で切断されます。問題を調査してみましたが、パディングと関係があると思いますが、わかりません。IE7を除くすべてのブラウザで動作します。

0 投票する
4 に答える
1522 参照

javascript - jsfiddleの質問

この非常に単純なjsfiddleを機能させることができません。ボタンがクリックされたときにテストを警告することになっています。ここで何が欠けていますか?

http://jsfiddle.net/u9nG6/2/

0 投票する
1 に答える
58 参照

html - タブメニューがページ幅を終了します

そのため、CSSを編集していて、タブメニューに空白:nowrapプロパティがあります。これは、重複しないが、最終的にページを終了することを意味します。タブメニュー自体の幅を設定しても、!importantおよび階層CSSを使用しても何も起こりません。

このように見えます

http://i.imgur.com/yxblJ.jpg

私が空白を行うとき:pre、または他のいずれかは重複してしまいます。

0 投票する
1 に答える
2192 参照

html - DIVにnowrapを設定するには? 特に多くのサブ DIV を含む

視差スクロール効果を作りたいです。以下の方法を使用しましたが、サブ DIV が追加されるとラップされます。

0 投票する
5 に答える
2016 参照

jquery - JQuery DataTabels - JQuery UI テーマ、TH で矢印ラップ

私はjquery uiテーマでデータテーブルを使用しています。ソート可能な列の場合、THの一部がその列のソートに使用される小さな矢印アイコンをラップしています。

約7列が表示されています。テキストの量が少ない (実際の TH テキストよりも幅が狭い) TD の場合、矢印アイコンは TH で折り返されます。すべての TH タグがテキストをラップしないようにする方法についてのアイデアはありますか? すべての列に 'sClass:nowrap' を追加してから、white-space:nowrap を使用する css nowrap クラスを作成しようとしましたが、それは TD でのみ機能し、TH では機能しません。

基本的に、すべての列の最小幅が TH コンテンツ (矢印を含む) と同じ幅であることを確認する方法が必要です。

0 投票する
2 に答える
189 参照

html - 'nowrap'を「柔らかく」するにはどうすればよいですか?

簡略化すると、A、B、Cの3つの要素があります。BとCはdivに一緒にあります。十分な水平方向のスペースがある場合(ブラウザウィンドウの幅が十分に広い場合)、次のように表示します

これまでのところ些細なことです。ウィンドウが小さくなった場合は、次のように折り返します。

私はdivにaを与えることでこれを解決しましたstyle.whiteSpace = "nowrap"。問題は、BCを表示するのに十分なスペースがない場合でも、BCがラップしなくなることです。ウィンドウがさらに小さくなったとき、これを次のように表示したい

だから私が探しているのは、回避する余地がある場合はラッピングを防ぎ、そうでない場合はラッピングを許可する、よりソフトなバージョンの「nowrap」です。

編集:

返信はすべてをフロートにすることで上記を解決しました:http://jsfiddle.net/nF4k5/6/

これは、私の単純化が行き過ぎであることに気づきました。実際、私のアプリケーションでは、Aはテキストであり、それ自体が折り返されているため、幅全体を埋めることがあります。BとCは、a)テキストAの最後の行に一緒に表示されるか、b)新しい行に、またはその行が短すぎる場合にc)2行に表示される単一の単語として想像できます。

いろいろ試してみる例を作成しました:http://jsfiddle.net/nF4k5/5/

画面がさらに小さくなると、次のようになります。

BC周辺のdivにnowrapを追加するなど、Aに変更を加える必要がない場合は、特に便利ですが、機能しません。

編集:解決策:BとCのラッパーにwhiteSpace = "nowrap"を与える代わりに、display="inline-block"を与えます。

0 投票する
2 に答える
1124 参照

css - ブロック要素を IE でラップしないように強制する (固定幅の親なし)

これは Web 上で非常によく議論される問題ですが、何時間もの調査と試行錯誤の末、IE 7、8、または 9 で以下の HTML を希望どおりに動作させることができません。

望ましい動作は次のとおりです。

  • .box 要素は折り返してはなりません - スクロール バーはウィンドウの下部に表示する必要があります
  • .box 要素の幅と高さは固定でなければなりません
  • .container と .childContainer の幅を固定することはできません。.box 要素の数は任意です
  • IE7+ および最近のバージョンの Chrome と FireFox で合理的に一貫して動作する必要があります

提供された HTML は Chrome で動作します。ブロック要素に対しても空白: nowrap を尊重すると思います。SPAN 要素を使用してみましたが、float: left を使用して強制的にブロック要素にする必要があります。そうしないと、width 属性が無視されます。DIV 要素と同じ問題があります。

JavaScript を使用せずにこれを解決できるはずですが、他のすべてが失敗した場合のオプションです。