- 強制不換行：white-space:nowrap;
- 超出部分隱藏：overflow: hidden;
- 隱藏部分用省略號代替：overflow: hidden; text-overflow: ellipsis;
- 自動換行：word-wrap: break-word; （ word-break: normal; ）
- 強制斷開英文單詞實現換行：word-break: break-all;
實例如下：
<style> .box1{ /* 超出隱藏 */ white-space:nowrap; overflow: hidden; height: 60px; width: 100px; border: 2px solid black; margin-bottom: 10px; } .box2{ /* 隱藏部分用省略號代替 */ white-space:nowrap; overflow: hidden; text-overflow: ellipsis; height: 60px; width: 100px; border: 2px solid black; margin-bottom: 10px; } .box3{ /* 自動換行 */ word-wrap: break-word; word-break: normal; height: 200px; width: 100px; border: 2px solid black; margin-bottom: 10px; } .box4{ /* 強制拆開英文單詞實現換行 */ word-break:break-all; height: 200px; width: 100px; border: 2px solid black; } </style> </head> <body> <div class="box1">Every night in my dreams, I see you, I feel you.</div> <div class="box2">Every night in my dreams, I see you, I feel you.</div> <div class="box3">Every night in my dreams, I see you, I feel you.</div> <div class="box4">Every night in my dreams, I see you, I feel you.</div> </body>