ホームページ > ウェブフロントエンド > CSSチュートリアル > 改行なしの div css nowrap_エクスペリエンス交換

改行なしの div css nowrap_エクスペリエンス交換

WBOY
リリース: 2016-05-16 12:05:14
オリジナル
1957 人が閲覧しました

たとえば、幅 210px の ul に 4 つの li があります。これら 4 つの li の幅は、それぞれのコンテンツの長さに応じて 80px、120px、140px、80px になります。
私が必要とする効果は、4 つのリが自動的に左側に配置されることです。 3 番目の li と最初の 2 つの li の長さの合計が ul の幅より大きい場合、3 番目の li は 1 行下に移動します。 2行目に表示されます。 ul の幅を広くしたり、それ自体を高くしたりする (コンテンツが折り返されて高さが増加する) 代わりに、
ul の幅を 210px に、li の幅を自動的に定義したところ、結果は次のようになりました。
ul はそうではありません。 li が次と同じ順序に自動的に配置されないのが残念です。代わりに、コンテンツは改行され、li が上がります。そして恥知らずにも最前列に押し込まれた。 。
慎重に検討した結果、問題は li の内部コンテンツの行折り返しにあると考えられます。そこで改行を禁止するcss属性を探しました。
ネットで調べましたが見つかりませんでした。グループ内のナガム・リユエさんにお願いしてワードブレイク属性を取得しました。 keep-all; 改行なし。 。
liに追加したところ、問題が解決したことに驚きました。
ワークグループのページをデバッグしていたところ、表示に問題があると指摘を受けました。
歩いて行って見てみましたが、表示は変わりませんでした。ブラウザのバージョンの問題かもしれないと思いました。
私は IE7 と FF を使用しており、彼らは IE6 を使用しています。 DW でチェックしたところ、ワードブレーク属性が実際に IE6 でサポートされていないことがわかりました。
CSS 属性のワードブレークはサポートされていません Microsoft Internet Explorer 5.0、Microsoft Internet Explorer 5.5、Microsoft Internet Explorer 6.0、Netscape Navigator 6.0、Netscape Navigator 7.0

本当にイライラします。この問題は以前から私を悩ませていました。それは決して解決されていません。
その友達が何か良い方法を持っているのでアドバイスをお願いします!どうもありがとう。


問題は解決されました。そう言うのはおかしいですよ。 DW にコードを手動で入力します。
属性でナラップを見つけました。これはワードブレイクからのナラップではないでしょうか?改行は防げますか?
試してみようという気持ちで、完全に入力してみました。
white-space: nowrap;
DW テストでは下線点線は表示されません。つまり、ブラウザのサポートに問題がないことを意味します。
F12を保存します。問題は解決された。ふふ。 。 。


ちなみに、構文を書き留めておきます:

構文:
空白 :normal | pre | nowrap
値:
normal : デフォルト値。デフォルトの処理方法。テキストは自動的に改行を処理します。コンテナの境界に達すると、コンテンツは次の行に移動します。
pre : 改行およびその他の空白文字は保護されます。この値には、標準準拠モードのサポートとして宣言された IE6 または !DOCTYPE が必要です。 !DOCTYPE 宣言で標準準拠モードが指定されていない場合、この属性は使用できますが、効果はありません。結果は通常の と同等になります。pre オブジェクトを参照してください。
nowrap : テキストの終わりまたは br オブジェクトに到達するまで、すべてのテキストを強制的に同じ行に表示します。 noWrap 属性を参照してください。

説明:
オブジェクト内の空白文字の処理方法を設定または取得します。
改行、スペース、タブなどのスペース文字は、HTML ドキュメントではデフォルトで無視されます。このプロパティが Normal または nowrap に設定されている場合、改行のない名前付きエンティティを使用してスペースを追加したり、 br 要素を使用して改行を追加したりできます。このプロパティは、IE で表示されるコンテンツと同じように、ドキュメント オブジェクト モデル (DOM) を使用して操作するコンテンツにも影響します。
このプロパティはブロック オブジェクトに対して機能します。
このプロパティは、currentStyle オブジェクトに対して読み取り専用です。他のオブジェクトについては、読み取りと書き込みが可能です。
対応するスクリプト機能はwhiteSpaceです。
出典:woria.cn
関連ラベル:
css
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート