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