ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS は、長い文字列が width_html/css_WEB-ITnose を超えると自動的に折り返すようにします。

CSS は、長い文字列が width_html/css_WEB-ITnose を超えると自動的に折り返すようにします。

WBOY
WBOYオリジナル
2016-06-21 08:54:502355ブラウズ

1. 関連情報

php で長い文字列 (文字列に改行がありません) を出力する場合、内容が設定された長さを超えたときに文字列が自動的に折り返されることが望まれます。それ以外の場合、改行記号のない文字列は設定された幅を超え、ページは無限に引き伸ばされます。

純粋な HTML コードでは、特別な宣言がなくても、設定された幅に従って自動的に折り返されます。たとえば、

<div style="width: 100px;">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>

上記のコードは、コンテンツの幅が 100px を超える場合に出力を自動的にラップします

ただし、php の長い文字列を出力する場合

<div style="width: 100px;"><?php echo $long_content; ?></div>

ここで $ コンテンツの幅long_content の値が 100px をはるかに超えていると、コンテンツ出力が自動的に折り返されず、文字列の幅に応じて無限に引き伸ばされることがわかります。はダミーの形をしていますが、明らかに期待したものではありません

2. 問題の説明

長い文字列が出力されると、コンテンツは自動的に折り返されず、ページが無限に伸びます

3. 解決策

以下の CSS 定義を使用します

<div style="width: 100px; word-break: break-all;word-wrap: break-word;"><?php echo $long_content; ?></div>
  1. word-break 属性は、自動行折り返しの処理方法を指定します。値 Break-all は、次のことを意味します。単語内では改行が許可されます。
  2. word-wrap 属性を使用すると、長い単語または URL アドレスを次の行に折り返すことができます。break-word 値は、長い単語または URL アドレス内で折り返すことを意味します。
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。