七款 CSS 自動換行效果

在開發網頁過程中，經常會遇到的問題是當段落太長的時候，應該用哪種換行效果？以下是一個簡單的 HTML 檔案可以讓開發者快速檢視換行效果，要使用該效果只需把相應的 CSS 應用至段落元素上即可。

換行效果

.c1{ width:300px; border:1px solid red}

safjaskflasjfklsajfklasjflksajflksjflkasjfksafj

This is all English. This is all English. This is all English.

全是中文的情況。全是中文的情況。全是中文的情況。

中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.

.c2{ width:300px;word-wrap:break-word; border:1px solid yellow}

safjaskflasjfklsajfklasjflksajflksjflkasjfksafj

This is all English. This is all English. This is all English.

全是中文的情況。全是中文的情況。全是中文的情況。

中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.

.c3{ width:300px;word-wrap:break-word;word-break:break-all; border:1px solid green}

safjaskflasjfklsajfklasjflksajflksjflkasjfksafj

This is all English. This is all English. This is all English.

全是中文的情況。全是中文的情況。全是中文的情況。

中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.

.c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}

safjaskflasjfklsajfklasjflksajflksjflkasjfksafj

This is all English. This is all English. This is all English.

全是中文的情況。全是中文的情況。全是中文的情況。

中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.

.c5{ width:300px;word-break:break-all; border:1px solid black}

safjaskflasjfklsajfklasjflksajflksjflkasjfksafj

This is all English. This is all English. This is all English.

全是中文的情況。全是中文的情況。全是中文的情況。

中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.

.c6{ width:300px;word-break:keep-all; border:1px solid red}

safjaskflasjfklsajfklasjflksajflksjflkasjfksafj

This is all English. This is all English. This is all English.

全是中文的情況。全是中文的情況。全是中文的情況。

中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.

.c7{ width:300px;word-wrap:break-word;overflow:auto; border:1px solid yellow}

safjaskflasjfklsajfklasjflksajflksjflkasjfksafj

This is all English. This is all English. This is all English.

全是中文的情況。全是中文的情況。全是中文的情況。

中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121

< html >      < head >          < title >自動換行 CSS 例子</ title >          < meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" />          < style >          .c1{ width:200px; border:1px solid red}          .c2{ width:200px;word-wrap:break-word; border:1px solid yellow}          .c3{ width:200px;word-wrap:break-word;word-break:break-all; border:1px solid green}          .c4{ width:200px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}          .c5{ width:200px;word-break:break-all; border:1px solid black}          .c6{ width:200px;word-break:keep-all; border:1px solid red}          .c7{ width:200px;word-wrap:break-word;overflow:auto; border:1px solid yellow}          </ style >      </ head >        < body >          .c1{ width:300px; border:1px solid red}          < div class = "c1" >          safjaskflasjfklsajfklasjflksajflksjflkasjfksafj          </ div >          < div class = c1 >          This is all English. This is all English. This is all English.          </ div >          < div class = c1 >          全是中文的情況。全是中文的情況。全是中文的情況。          </ div >          < div class = c1 >          中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.          </ div >            < br >          .c2{ width:300px;word-wrap:break-word; border:1px solid yellow}          < div class = "c2" >          safjaskflasjfklsajfklasjflksajflksjflkasjfksafj          </ div >          < div class = c2 >          This is all English. This is all English. This is all English.          </ div >          < div class = c2 >          全是中文的情況。全是中文的情況。全是中文的情況。          </ div >          < div class = c2 >          中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.          </ div >            < br >          .c3{ width:300px;word-wrap:break-word;word-break:break-all; border:1px solid green}          < div class = "c3" >          safjaskflasjfklsajfklasjflksajflksjflkasjfksafj          </ div >          < div class = c3 >          This is all English. This is all English. This is all English.          </ div >          < div class = c3 >          全是中文的情況。全是中文的情況。全是中文的情況。          </ div >          < div class = c3 >          中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.          </ div >            < br >          .c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}          < div class = "c4" >          safjaskflasjfklsajfklasjflksajflksjflkasjfksafj          </ div >          < div class = c4 >          This is all English. This is all English. This is all English.          </ div >          < div class = c4 >          全是中文的情況。全是中文的情況。全是中文的情況。          </ div >          < div class = c4 >          中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.          </ div >            < br >          .c5{ width:300px;word-break:break-all; border:1px solid black}          < div class = "c5" >          safjaskflasjfklsajfklasjflksajflksjflkasjfksafj          </ div >          < div class = c5 >          This is all English. This is all English. This is all English.          </ div >          < div class = c5 >          全是中文的情況。全是中文的情況。全是中文的情況。          </ div >          < div class = c5 >          中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.          </ div >            < br >          .c6{ width:300px;word-break:keep-all; border:1px solid red}          < div class = "c6" >          safjaskflasjfklsajfklasjflksajflksjflkasjfksafj          </ div >          < div class = c6 >          This is all English. This is all English. This is all English.          </ div >          < div class = c6 >          全是中文的情況。全是中文的情況。全是中文的情況。          </ div >          < div class = c6 >          中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.          </ div >            < br >          .c7{ width:300px;word-wrap:break-word;overflow:auto; border:1px solid yellow}          < div class = "c7" >          safjaskflasjfklsajfklasjflksajflksjflkasjfksafj          </ div >          < div class = c7 >          This is all English. This is all English. This is all English.          </ div >          < div class = c7 >          全是中文的情況。全是中文的情況。全是中文的情況。          </ div >          < div class = c7 >          中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.          </ div >      </ body > </ html >

看更多IT文章按此: dukeland.hk