首頁
CSS實現強制不換行/自動換行/強制英文單詞斷行
強制不換行
程序代碼 程序代碼
自動換行
程序代碼 程序代碼
強制英文單詞斷行
程序代碼 程序代碼
HTML代碼
強制不換行
程序代碼 程序代碼
- 代碼:
div{
white-space:nowrap;
}
自動換行
程序代碼 程序代碼
- 代碼:
div{
word-wrap: break-word;
word-break: normal;
}
強制英文單詞斷行
程序代碼 程序代碼
- 代碼:
div{
word-break:break-all;
}
HTML代碼
- 代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.div1{
white-space:nowrap;
}
.div2{
word-wrap: break-word;
word-break: normal;
}
.div3{
word-break:break-all;
}
</style>
</head>
<body>
<div class="div1" style="width:300px">強制不換行強制不換行強制不換行強制不換行強制不換行強制不換行強制不換行強制不換行強制不換行強制不換行強制不換行強制不換行強制不換行強制不換行強制不換行強制不換行強制不換行</div>
<hr/>
<div class="div2" style="width:300px">自動換行自動換行自動換行自動換行自動換行自動換行自動換行自動換行自動換行自動換行自動換行</div>
<hr/>
<div class="div3" style="width:300px">11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
<hr/>
</body>
</html>