14. CSS - 長い文字列が幅を超える場合に自動的に折り返す

1. 関連情報

PHPで長い文字列（文字列に改行がありません）を出力する場合、内容が設定された長さを超えたときに文字列が自動的に折り返されることが望まれます。そうでない場合は、改行のない文字列が超過します。設定された幅に応じて、ページは無限に引き伸ばされます

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

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

上記のコードは、コンテンツの幅が100pxを超えると、自動的に折り返されます出力をラップします

しかし、php

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

の長い文字列を出力する場合、$long_content のコンテンツ幅は 100px をはるかに超えており、コンテンツ出力はページを自動的に折り返さないことがわかります。文字列の幅に応じて無限に引き伸ばされます。つまり、定義された幅は想像上のものであり、明らかに期待とは異なります。 2. 問題の説明 $long_content的内容宽度是远超过100px的，可以看到内容输出是不会自动换行的，会根据字符串的宽度无限拉伸页面，也即有多长就会拉伸多长，定义的宽度形如虚设，显然不是我们所期望的

二、问题描述

当输出长字符串时，内容不会自动换行，会无限拉伸页面

三、解决方案

使用如下的css定义

<code><span>div</span><span>style</span>=<span>"width: 100px; word-break: break-all;word-wrap: break-word;"</span>><span><span><?php </span><span>echo</span><span>$long_content</span>; <span>?></span></span><span><span>div</span>></span></span></code>

1. word-break 属性规定自动换行的处理方法，值 break-all 表示允许在单词内换行。
2. word-wrap 属性允许长单词或 URL 地址换行到下一行，值break-word
長い文字列を出力する場合。の場合、コンテンツは自動的に折り返されず、ページが無限に伸びます

3. 解決策次の CSS 定義を使用します

rrreee

1. word-break 属性で自動折り返し処理を指定しますword-break メソッドの値 break-all は、単語内の改行が許可されることを意味します。
2. word-wrap 属性により、長い単語または URL アドレスを次の行に折り返すことができます。値 break-word は、長い単語または URL アドレス内で折り返すことを意味します。
   🎜').addClass('事前番号付け').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i 🎜').text(i)); }; $numbering.fadeIn(1700); }); }); 🎜 🎜 以上、14. CSS - 長い文字列が幅を超えた場合に内容も含めて自動的に折り返す を紹介しましたので、PHPチュートリアルに興味のある友人の参考になれば幸いです。 🎜 🎜 🎜