CSS3 の非折り返しとは、行末に達したときに自動的に折り返されず、引き続き次の行まで続くようにテキスト コンテンツにスタイルを設定することを指します。このテクニックは、ページをよりすっきりと明確に見せるために、テキストやコード領域などの単一行をデザインするためによく使用されます。
CSS3 では、行の折り返しを実現するために、ホワイトスペースとワードラップという 2 つの一般的に使用される方法があります。次にそれぞれの紹介と応用例を示します。
1.white-space
white-space 属性は、要素内の空白の処理方法を定義します。
この属性には次のオプション値があります:
適用例:
<style>
.nowrap {
white-space: nowrap; /*文本不换行*/
}
.pre {
white-space: pre; /*保留所有空格与换行符*/
}
</style>
<div class="nowrap">这是一段不会换行的文本</div>
<div class="pre">这是一段<pre class="brush:php;toolbar:false"> 会 保 留 所 有 空 格
和 换 行 符
2. word-wrap
word-wrap 属性は、長すぎる単語を折り返すときに折り返すことができるかどうかを指定するために使用されます。 . 2 行目を切り捨てます。実際のアプリケーションでは、より狭いコンテナ幅を設定するときに、単語を切り取りたくないが行を折り返すことができるようにしたい場合は、この属性を設定する必要があります。
この属性には次のオプション値があります:
応用例:
<style>
.break-word{
word-wrap:break-word;
}
</style>
<div style="width:100px;border:1px solid #000;">
<p class="break-word">这是一个很长很长很长的单词：aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>以上はCSS3非行折り返し技術の導入と応用例です。非改行テクノロジーを合理的に使用することで、ページをより柔軟にし、デザインの拡張性を高めることができます。
以上がCSS3非行ラッピング技術の紹介と応用例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
