CSSをラップする方法

CSS では、word-break 属性と White-space 属性を使用して、自動行折り返しを設定します。word-wrap 属性を使用すると、長い単語や URL アドレスを次の行に折り返すことができ、white-space 属性を使用できます。テキストを設定できる改行モード。

#この記事の動作環境: Windows7 システム、css3 バージョン、Dell G3 コンピューター。

CSS で行を折り返すにはどうすればよいですか?

css によりコンテナが自動行折り返しに収まらなくなる

css では、ワードブレークとホワイトスペースの 2 つのプロパティを使用して自動行折り返しを設定できます。 word-wrap 属性を使用すると、長い単語や URL アドレスを次の行に折り返すことができます。ホワイトスペース属性でテキストの折り返し方法を設定できます。

css により、コンテナーを自動的に固定したり折り返すことができなくなります:

css コード:

<style type="text/css">
.linebr {
clear: both; /* 清除左右浮动 */
width: 100px; /* 必须定义宽度 */
border:1px solid ;/*定义容器外边框*/
word-break: break-word; /* 文本行的任意字内断开 */
word-wrap: break-word; /* IE */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: pre; /* CSS2 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
}
</style>

HTML コード:

CSS コンテナのコンテンツが自動行折り返しを超えています (オーバーフロー)、CSS コンテナのコンテンツが自動行折り返しを超えています (オーバーフロー)、CSS コンテナのコンテンツが自動行折り返しを超えています (オーバーフロー)

レンダリング:

word-break 属性:

word-wrap 属性を使用すると、長い単語または URL アドレスを次の行に折り返すことができます。

構文:

word-wrap: normal|break-word;

属性値:

normal 許可されたハイフネーション位置でのみ改行します (ブラウザーはデフォルトの処理を維持します)。

break-word 長い単語または URL アドレス内の改行。

white-space 属性

white-space 属性は、要素内の空白を処理する方法を設定します。

属性値:

normal デフォルト。空白はブラウザによって無視されます。

pre 空白はブラウザによって保持されます。これは、HTML の

 タグのように動作します。 <p></p>nowrap テキストは折り返されません。テキストは、<br> タグが見つかるまで同じ行に続きます。 <p></p>pre-wrap 空白シーケンスを保持しますが、通常どおりラップします。 <p></p>pre-line は空白シーケンスをマージしますが、改行は保持します。 <p></p>inherit は、空白属性の値を親要素から継承することを指定します。 <p></p>推奨学習: 「<p>css ビデオ チュートリアル <a href="https://www.php.cn/course/list/12.html" target="_blank">」</a></p>

以上がCSSをラップする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。