css+div_html/css_WEB-ITnose でテキストオーバーフローを解決する方法-htmlチュートリアル-php.cn

css+div_html/css_WEB-ITnose でテキストオーバーフローを解決する方法

WBOY

リリース： 2016-06-24 12:32:58

オリジナル

1267 人が閲覧しました

タイトルを見ると、文字を切り取って「…」を追加することを容易に思いつきます。ははは、それだけです。実際、このログを書くのは、このような状況に対処する方法をまだ覚えていない人が多いと思われるため、この方法を記録するためです。

まず最初に説明します。一般に、div+css コンテナー内のテキストが長さを超えると、フレームの外側に浮かんだり、フレームが拡張されたりします。これは一般的には簡単に解決できますが、今日そのような問題に遭遇しました。 : IE6でページをテストしてみた IE8でテストしたページではオーバーフローテキストが正常に処理されてしまい、落ち込んだのですが、このオーバーフロー処理はIE特有のものではないでしょうか？ IE6が正しく動作しないのはなぜですか?後でオンラインで調べたところ、IE6 ではオーバーフロー処理が div 内に記述された場合のみサポートされ、IE6 以降では

内に記述された場合のみサポートされていることが判明したため、同じオーバーフロー処理コードをdivと

当たったら普通だよ汗！！！これが私の処理のスクリーンショットです:
以下は HTML ページのコードです:
以下はレンダリングです (処理後も同じになります):

これは IE6 用、これは IE8 用です。

以下は、上記 2 つのオーバーフロー処理のコードです:
これは ie6 の処理コード、これは ie8 の処理コードです

以下は、インターネット上のいくつかの処理方法であり、参考にする価値があります:

全般テキストの切り捨て (インラインおよびブロックに適用可能):
ソースコードの例 [www.mb5u.com]

.text-overflow {
display:block;/*インラインオブジェクトを追加する必要があります*/
width:31em; word-break:keep-all ;/* 行の折り返しなし*/
white-space:nowrap;/* 行の折り返しなし*/
overflow:hidden;/* コンテンツが幅を超える場合、余分なコンテンツを非表示*/
text -overflow:ellipsis;/* オブジェクト内の場合テキストがオーバーフローする場合は、省略マーク (...) を overflow:hidden; と併用する必要があります。 */
}

テーブルテキストオーバーフローの定義:

ソースコード例 [www.mb5u.com]

table{

width:30em;
table-layout:fixed;/* テーブルのレイアウトのみ定義されたアルゴリズムは固定されているため、以下の td の定義は機能します。 */
}
td{
width:100%;
word-break:keep-all;/* 改行なし*/
white-space:nowrap;/* 改行なし*/
overflow:hidden;/*コンテンツが超過する幅が */
text-overflow:ellipsis;/* の場合、超過したコンテンツを非表示にします。オブジェクト内のテキストが overflow:hidden; と併用する必要がある場合は、省略記号 (...) を表示します。 */
}

注意する必要があるのは、この機能はテキストの 1 行でのみ機能するということです。複数行で使用したい場合は、最初の行のみが機能します。この書き方で「…」が表示されるのはIEだけです。他のブラウザでは指定した幅を超えると文字が非表示になります。

Opera と Firefox における中国語テキストのオーバーフロー処理の詳細な研究:

[問題]
最近、Opera でブラウジングすると、スペースの右半分が非常に広くなることを発見しました (私はあなたと同じレイアウトモードを使用しています)。表示範囲が 1024 を超えてウィンドウが最大化されると、提供された方法に従ってすべてのモジュールを削除した後も、同じ状態になります...

を使用します。別の方法パスにより、同じレイアウトと組版で新しいスペースが開きますが、Opera では問題ありません

スペースの右側で拡張スペースをテストし、2 番目の HTML モジュールを追加したためでしょうか。削除しました] などの操作により、スペースコードが台無しになりましたか?

[理由]

ブラウザーの互換性の問題は、正確に言うと、ブラウザーの CSS 標準の実装に伴う問題です。 Opera が正しく表示されないだけでなく、Firefox も正しく表示できないことを知っておいてください。Firefox は標準ブラウザとして認識されており (もちろん Opera も同様です)、より高い市場シェアを持っているため、Firefox が認証に使用されます

。

[例]

1. Firefox は省略記号 (…) 属性をサポートしていません。つまり、長い文字列には省略記号が表示されます。これは、スペースログ編集のログオプションに適用されます。ページに長いカテゴリ名を入力した場合、ログに戻って編集すると、IE では元のカテゴリ名が先頭部分に表示され、直接省略記号に置き換えられますが、Firefox などのブラウザではそれが表示されます。

2. Firefox では、style="overflow:hidden" はやに対してのみ機能します。固定リンクセクションでは、IE ブラウザは word-wrap 属性を使用して width を超える文字列を折り返すことができます。具体的には、固定リンクのアドレス長が 300px を超えると、自動的に折り返されます。 word;width:300px;left:0}

Firefox などのブラウザでは、word-wrap CSS 属性が W3 標準に準拠していないため、この属性は認識されず、white-space:normal; に置き換える必要があります。 FireFox と IE では改行を正しく行うことができます。また、単語間のスペースを使用しないと改行が正しくならないことに注意してください。