1. 换行
例1:
<style>
.out {
width: 300px;
border: 1px solid #ccc;
}
.out .text{
margin-top: 16px;
}
</style>
<body>
<div class="out">
<div class="text">
1425548四点开会啦三个事故后果会是sjhguasepgghhhhhhhhhhhhhsagiua会受到帮你发
</div>
<div class="text">
sahghggsajiuepqqnnlncbangkshoiehuaduugfkaskpaspfjaogeghghiehuiqejaonnjj
</div>
<div class="text">
和适度更好拉上来就撒娇的胡歌吧按时间黄瓜丝吉萨亚特很哈皮快递给护额阿布接收到的谷歌苹果
</div>
</div>
</body>
1.1 强制换行
例1英文默认不换行,如需要强制换行.text
元素要增加css样式:
word-break: break-all;
white-space: normal;
<style>
.out .text{
margin-top: 16px;
word-break: break-all;
white-space: normal;
}
</style>
1.2 强制不换行
例1中文默认换行,如需要强制不换行.text
元素要增加css样式:
white-space:nowrap;
<style>
.out .text{
margin-top: 16px;
white-space: nowrap;
}
</style>
1.3 不换行显示省略号
例1如需要不换行显示省略号.text
元素要增加css样式:
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
<style>
.out .text{
margin-top: 16px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>