ホームページ > 記事 > ウェブフロントエンド > CSS3非行ラッピング技術の紹介と応用例
CSS3非行ラッピング技術の紹介と応用例
- PHPzオリジナル
- 2023-04-24 09:07:38635ブラウズ
CSS3 の非折り返しとは、行末に達したときに自動的に折り返されず、引き続き次の行まで続くようにテキスト コンテンツにスタイルを設定することを指します。このテクニックは、ページをよりすっきりと明確に見せるために、テキストやコード領域などの単一行をデザインするためによく使用されます。
CSS3 では、行の折り返しを実現するために、ホワイトスペースとワードラップという 2 つの一般的に使用される方法があります。次にそれぞれの紹介と応用例を示します。
1.white-space
white-space 属性は、要素内の空白の処理方法を定義します。
この属性には次のオプション値があります:
- normal: デフォルト。余分な空白は無視します。
- nowrap: テキストは折り返されません。
- pre: すべてのスペースと改行を保持します。
- pre-wrap: すべてのスペースと改行を保持しますが、ラップします。
- pre-line: 余分な空白は無視しますが、改行は保持します。
適用例:
<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 行目を切り捨てます。実際のアプリケーションでは、より狭いコンテナ幅を設定するときに、単語を切り取りたくないが行を折り返すことができるようにしたい場合は、この属性を設定する必要があります。
この属性には次のオプション値があります:
- normal: デフォルト。改行は、許可されたハイフネーションポイント (ブラウザーで予約済み) でのみ行われます。
- break-word: 長い単語または URL アドレス内の改行。
応用例:
<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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。