CSS3不換行技術簡介及應用實例

CSS3不換行指的是在文字內容中設定一種樣式，使其在遇到行末時不會自動換行，而是繼續延伸到下一行。這種技術常用於設計單行文字或程式碼區域等，可以讓頁面看起來更整潔清晰。

在CSS3中，不換行有兩種常用的實作方法：white-space和word-wrap。接下來我們將逐一介紹並給出應用實例。

一、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 class="nowrap">这是一段不会换行的文本</div>
<div class="pre">这是一段<pre class="brush:php;toolbar:false"> 会 保 留 所 有 空 格 
和 换 行 符 

登入後複製

二、word-wrap

#word-wrap 屬性是一個用來指定一個超長的單字是否可以在換行時被截斷放在第二行。實際應用中，在設定了較窄的容器寬度的時候，如果我們不希望單字被切割而希望能夠換行，則應該設定該屬性。

這個屬性有以下可選值：

1. normal：預設。只在允許的斷字點換行（瀏覽器保留）。
2. 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中文網其他相關文章！