css怎麼實現英文不換行

css實作英文不換行的方法：先建立一個HTML範例檔；然後在body中定義一些英文內容；最後透過加入「white-space:nowrap;」屬性來實現英文不換行效果。

本文操作環境：windows7系統、HTML5&&CSS3版、Dell G3電腦。

CSS強制英文、中文換行與不換行

設計製作HTML時會遇到CSS強制英文、中文換行與不換行的問題，可以透過本文了解一下相關知識。

結構：

1.Transshipment Booking System is launched只對英文起作用，以字母作為換行依據

2.Transshipment Booking System is launched只對英文起作用，以單字作為換行依據

3.Transshipment Booking System is launched只對中文起作用，強制換行

4.Transshipment Booking System is launched強制不換行，都起作用

5.不換行，超出部分隱藏且以省略號形式出現

5.不換行，超出部分隱藏且以省略號形式出現Transshipment Booking System is launched

代碼：

.p1{ word-break:break-all; width:150px;}/*只對英文起作用，以字母作為換行依據*/

.p2{ word-wrap:break- word; width:150px;}/*--只對英文起作用，以單字作為換行依據*/

.p3{white-space:pre-wrap; width:150px;}/*只對中文起作用，強制換行*/

.p4{white-space:nowrap; width:10px;}/*強制不換行，都起作用*/

##.p5{white- space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100px;}//*不換行，超出部分隱藏且以省略號形式出現*/

#1. word-break:break-all ;只對英文起作用，以字母作為換行依據

2. word-wrap:break-word; 只對英文起作用，以單字作為換行依據

#3.{white- space:pre-wrap; 只對中文起作用，強制換行

4.{white-space:nowrap; 強制不換行，都起作用

#5.{white-space:nowrap ; overflow:hidden; text-overflow:ellipsis;不換行，超出部分隱藏且以省略號形式出現

注意，一定要指定容器的寬度，不然的話是沒有用的。

注意word-break 是IE5 專有屬性

語法：

word-break : normal | break-all | keep-all

參數：

normal : 　依照亞洲語言和非亞洲語言的文字規則，允許在字內換行

break-all : 　該行為與亞洲語言的normal相同。也允許非亞洲語言文本行的任意字內斷開。該值適合包含一些非亞洲文本的亞洲文本

keep-all : 　與所有非亞洲語言的normal相同。對於中文，韓文，日文，不允許字斷開。適合包含少量亞洲文本的非亞洲文本

說明：

設定或檢索物件內文本的字內換行行為。尤其在出現多種語言時。

對於中文，應該要使用break-all 。

【推薦學習：

css影片教學】#

以上是css怎麼實現英文不換行的詳細內容。更多資訊請關注PHP中文網其他相關文章！