pre tag_html/css_WEB-ITnose でのコンテンツ ラッピング メソッドの CSS 実装

pre タグでコンテンツの折り返しを実装するための CSS テクノロジー

おそらくはい 2015-01-25 18:35 に公開されました

HTML の PRE タグは、たとえ word-wrap 属性と word-break 属性が設定されていても、デフォルトでは折り返されませんDIV タグはページを分割せずに簡単にラップできます。このため、多くの Web サイトでは、コードを表示するときに DIV をコンテナとして使用します。 DIV タグを使用してコードをロードする場合の欠点の 1 つは、改行、タブ、スペースなどをすべて変換する必要があるため、ソース コードのサイズも大幅に大きくなるということです。 DIV タグを使用する必要がある場合は、空白を使用して DIV 内のコンテンツの表示スタイルを制御することもできます。

私の意見では、ソース コード内のコード コンテナーとして PRE タグを使用するのが第一の選択です。その後、フロントエンドはレンダリングを美しくするために他の JavaScript コードを強調表示します。 CSS を使用して PRE でコンテンツをラップするスタイルは次のとおりで、テストの結果、効果がかなり優れていることがわかりました。

<style>pre{    white-space: pre-wrap;       /* css-3 */    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */    white-space: -pre-wrap;      /* Opera 4-6 */    white-space: -o-pre-wrap;    /* Opera 7 */    word-wrap: break-word;       /* Internet Explorer 5.5+ */    overflow: auto;    word-break: break-all;    word-wrap: break-word;}</style>

読む (72) コメント (0) コメントを見る