css如何控製文字換行方式？ （程式碼範例）

css如何控製文字換行方式？本篇文章就介紹css設定文字（特別是連續的數字和英文）強制換行、強制不換行且隱藏超出部分的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

一、css設定文字的強制換行

關於換行問題，正常字元的換行是比較合理的，但連續的數字和英文字元常常將容器撐大，而不換行，就挺讓人頭疼了，這就需要進行強制換行。 php中文網相關學習推薦：CSS教學！

下面我們透過簡單的程式碼範例來介紹css實作強制換行的方法。

html程式碼：

<div class="demo">
	<p>正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal，当定义的宽度之后就会自动换行</p>
	<p>数字和英文字符:</p>
	<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
	<p>强制换行后</p>
	<p class="wrap">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>

css程式碼：

.demo .wrap {
	table-layout: fixed;
	word-wrap: break-all;
	word-break: normal;
	overflow: hidden;
}

效果圖：

說明：

white-space: normal;  設定文字的自動換行;

word-break: break-all;  設定文字的強制換行，但只對英文起作用，以字母作為換行依據。

因為文字的容器p的寬度為400px，所有它的內容會在到達400px時自動換行，但該行末端有一個很長的英文單詞，它不會把單字移到下一行在顯示，而是在本行把單字截斷，一部分保持在行尾顯示，另一部分換到下一行顯示，這樣不是很利於英文的閱讀。

word-wrap: break-word; 設定文字的強制換行，但只對英文起作用，以單字作為換行依據。

文字與上面一致，但差異在於它會把整個單字看成一個整體，如果該行末端寬度不夠整個單字顯示，它就會自動把整個單字放到下一行顯示，而不會把單字截斷掉。

white-space: pre-wrap;  設定文字的強制換行，但只對中文運作。

二、css設定文字的強制不換行

下面我們透過簡單的程式碼範例給大家介紹css設定文字的強制不換行，且超出部分隱藏的方法

html程式碼：

<div class="demo">
	<p>This is a long Wordddddddddddddddddddddddddddddddddddddddd!</p>
	<p class="wrap">This is a long Wordddddddddddddddddddddddddddddddddddddddd!</p>

</div>

css程式碼：

.demo .wrap {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

效果圖：

說明：

white-space:nowrap; 設定文字禁止換行（強制不換行）。

overflow:hidden; 設定把多餘內容藏起來，不讓多餘的內容撐破容器。

text-overflow:ellipsis; 設定多出的內容以省略號…來表達。註：text-overflow:ellipsis; 屬性主要用於IE等瀏覽器中，Opera瀏覽器要考慮相容性，使用-o-text-overflow:ellipsis; 才可以實現效果；而在Firefox瀏覽器中就沒有這個功能了，只能把多出的內容藏起來。

總結：以上就是這篇文章所介紹的css設定文字換行的兩種方式，分別為：強制轉換和強制不轉換，大家可以自己試試，加深理解，希望能對大家的學習有所幫助。

進一步學習：

1、css如何實作禁止文字被選中，禁止複製？

2、css如何讓文字溢出部分顯示省略號？

以上是css如何控製文字換行方式？ （程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！