Div 内の長いテキストのクロスブラウザーでのワードラップを実現するにはどうすればよいですか?-CSSチュートリアル-php.cn

Div 内の長いテキストのクロスブラウザーでのワードラップを実現するにはどうすればよいですか?

DDD

リリース： 2024-12-07 13:39:19

オリジナル

565 人が閲覧しました

How Can I Achieve Cross-Browser Word Wrapping for Long Text in Divs?

長文テキスト向けのクロスブラウザー Word 折り返しテクニックを公開

div 内で長いテキストを表示する場合、多くの場合、Word 折り返しが必要になります。可読性を高めるため。 Internet Explorer はワードラップスタイルを提供しますが、クロスブラウザソリューションを実現するには、より包括的なアプローチが必要です。

CSS ベースのソリューション:

クロスブラウザを実現するにはCSS を使用したワードラップでは、ブラウザ固有のプロパティの組み合わせを使用できます。

.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

ログイン後にコピー

このクラスは、さまざまなブラウザのレンダリングエンジンに対応する多用途のソリューション。

JavaScript ベースの代替:

CSS が使用できない場合は、JavaScript をワードラッピングに利用できます。以下はサンプルスニペットです:

var text = "Long, unbroken string that needs to be wrapped";

// Create a <div> element
var div = document.createElement("div");

// Set the innerHTML of the <div> to the text
div.innerHTML = text;

// Set the white-space style to 'pre-wrap'
div.style.whiteSpace = "pre-wrap";

// Append the <div> to the document
document.body.appendChild(div);

ログイン後にコピー

この場合、ブラウザ間の互換性を高めるために、空白スタイルは明示的に「事前ラップ」に設定されています。

以上がDiv 内の長いテキストのクロスブラウザーでのワードラップを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。