問題タブ [nowrap]

私は現在、横スクロールのポートフォリオ サイトである新しい Web プロジェクトに取り組んでいます。ほぼ完了です。想定どおりに機能しないコードが 1 つだけあります。

画面の左上に、参照された ID にスムーズにスクロールするアンカー リンクを含むハンバーガー メニューがあります。問題は、ページをスクロールするとすぐに、スクロール距離がめちゃくちゃになり、スクロール距離が完全にめちゃくちゃになることです。

ページへのリンクは次のとおりです: http://www.timbrack.de/#portfolio

エラーを再現するには、バーガーメニューをクリックして「about」をクリックします

次のように、コンテナーが水平方向に収まるように空白: nowrap を使用します。

スクロールのスクリプトは次のようになります。

スクロール距離がめちゃくちゃになる理由がわかりましたか？

乾杯ティム

IE がnowrap CSS 属性に適切に応答しない。

質問: Chrome のレンダリング結果としてレンダリングされるように、IE でこれを機能させるにはどうすればよいですか。

http://jsfiddle.net/subsari/tmz0t0z2/3/

ChromeのようにIEにテーブルをレンダリングさせるにはどうすればよいですか? 最もクリーンなソリューション？

事前にご連絡いただきありがとうございます。

互いにいくつかの div を含む HTML ページがあります。

#givenサードパーティによって提供され、明示的なwidthセットがありますが、その幅は JavaScript を介して変更できます。

#one、#two、#threeおよび#fourすべてに暗黙的な幅があります。

#three次のようなスタイルシートがあります。

#fourには多くのテキストが含まれており、完全にオーバーフローしていますが、オーバーフローはホバリング#threeされるまで隠されています。 を適用したいのですが、が設定されている場合にのみ機能するようです。ただし、それは両方と数千ピクセルを左に伸ばします。これは、私が望むものではありません。 これまでのところ、 の幅を明示的に設定する他の解決策は見つかりませんでした。これは (可能ですが、非常に) の幅が固定されていないため、非常に非現実的です。#three
#fourtext-overflow: ellipsis;white-space: nowrap;#three#four
#four#given

これを行うJS以外の方法はありますか？

ここに私の問題があります: https://jsfiddle.net/zquL7sem/3/

#three私の目標は、またはの明示的な幅を設定せずに、赤い境界線の内側の領域を青い線で終了させ、テキストが終了する場所に 3 つのドットを表示すること#fourです。

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

改行が発生するのはなぜですか? 私は以下を使用します: 空白: nowrap; しかし、スパンを埋めると改行が表示されます。これは何が原因ですか？

モデルライブラリのコード例「Mouse Drag Multiple Example」をラップされていない世界に変換する方法について、誰かがヒント（または完全な解決策！）を与えることができますか？私の試みは選択長方形を破壊します（長方形の側面が端に積み重なっています - 各部分が別々に扱われるためです）。同様に、選択されたタートルは端に積み上げられます。ありがとうございました。

モデルの主な手順は次のとおりです。選択長方形の辺がラップされていないワールドの端に到達すると、2 番目の setxy で実行時エラーが発生します。

左端の列を常に表示する必要があり、各行が 1 行しか表示されない表形式の大量のデータがあります。これは、CSS ディレクティブで実現できますwhite-space: nowrap。

私はDataTables jQuery プラグインとそのFixedColumns 拡張機能を選択しました。これは、私が探しているものに非常にうまく適合します。

ただし、Internet Explorer (バージョン 11 は手元にあるものです) グリッドが正しく整列していないことがわかります。固定列には独自のスクロール バーがあり、テーブル ヘッダーは対応する列と完全に整列しなくなりました。

問題を示すために JSFiddle を作成しました - http://jsfiddle.net/tczwysao/11/。空白ディレクティブをコメント アウトすると、列が整列することがわかります。しかし、1 行にとどまるには、一番左の列が必要です。

これを実装した方法にエラーがありますか、それとも回避策を提案できますか?

私はwhite-space: nowrapanddisplay: inline-blockを使用して 2 つの要素を同じ行に配置し、White-space: normalそれらの要素の内部に設定して、内部のテキストが正常に折り返されるようにしました。

問題は、何らかの理由で、ビューポートの幅が要素の 1 つ (両方ではなく) より小さくなるまで、テキストが折り返されないことです。

これをさらに説明するためにフィドルを作成しました: https://jsfiddle.net/krkb8d9L/1/。ウィンドウを 100px (左端の要素の幅) に縮小する必要があることに注意してください。テキストの折り返しが始まる前に、通常よりも小さくなります。

誰かがなぜこれが起こっているのか説明できますか? ブラウザ間でも一貫しているようです。テキストが収まらなくなるとすぐに折り返しが開始されることは明らかです (たとえば、要素がフロートされた場合のように)。

私はこのサイトに取り組んでいます: http://sbw.aaugirlsbasketball.org/

クライアントは、Windows 10 マシンで IE 11 を使用していて、タイトル「AAU Girls Basketball」が特定の解像度で 2 行に分割されていると述べています。<header id="skin_header">タグで IE の Inspect Element を使用したときに検出されるおおよその画面幅は次のとおりです。

1. 幅 1320px: OK
2. 幅 1300px: 2 行に分割
3. 幅 1140px: OK
4. 幅 1065px: 2 行に分割
5. 幅 984px: 小さくなりますが、まだ壊れています。ここからテキストのサイズが変わりますが、760px になるまで壊れ続けます。

スクリーンショットは次のとおりです。

以下の CSS でわかるように、 に追加しようとしspan.head1 { white-space: nowrap; }ましたが、うまくいかなかったようです。IE に問題を再現させることができず、開発者にも再現させることができません。

HTML:

CSS:

画面が小さくなったときにクライアントの headertitle が 2 行に分割されないように、だれかがこの問題を再現して解決策を提供できますか?