- 强制不换行：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>