CSS3非行ラッピング技術の紹介と応用例

CSS3 の非折り返しとは、行末に達したときに自動的に折り返されず、引き続き次の行まで続くようにテキスト コンテンツにスタイルを設定することを指します。このテクニックは、ページをよりすっきりと明確に見せるために、テキストやコード領域などの単一行をデザインするためによく使用されます。

CSS3 では、行の折り返しを実現するために、ホワイトスペースとワードラップという 2 つの一般的に使用される方法があります。次にそれぞれの紹介と応用例を示します。

1.white-space

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

この属性には次のオプション値があります:

1. normal: デフォルト。余分な空白は無視します。
2. nowrap: テキストは折り返されません。
3. pre: すべてのスペースと改行を保持します。
4. pre-wrap: すべてのスペースと改行を保持しますが、ラップします。
5. pre-line: 余分な空白は無視しますが、改行は保持します。

適用例:

<style>
    .nowrap {
        white-space: nowrap; /*文本不换行*/
    }
    .pre {
        white-space: pre; /*保留所有空格与换行符*/
    }
</style>
<div>这是一段不会换行的文本</div>
<div>这是一段<pre class="brush:php;toolbar:false"> 会 保 留 所 有 空 格 
和 换 行 符