html:
<div class="content content1">sda dcxmmm sadsads adsad</div>
<div class="content content2">sda dcxmmm sadsads adsad</div>
<div class="content content3">集中反映社会生活并具有一定节奏和韵律的文学体裁</div>
<div class="content content4">sda dcxmmm sadsads adsad</div>
<div class="content content5">集中反映社会生活并具有一定节奏和韵律的文学体裁</div>
.content{
width: 50px;
background: yellow;
margin: 10px;
}
.content1{
word-break: break-all;/* 只对英文起作用,以字母作为换行的依据 */
}
.content2{
word-wrap: break-word;/* 只对英文起作用,以单词作为换行依据 */
}
.content3{
white-space: pre-wrap;/* 只对中文起作用,强制换行 */
}
.content4{
white-space: nowrap;/* 强制不换行,都起作用 */
}
.content5{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;/* 不换行,超出部分隐藏并以省略号代替出现 */
}
效果图如下: