以下是操作的HTML结构:
让其自动换行,高度设置为一行的高度,加了行高是避免2行太近会把下一行的顶部显示出来,当然可以扩展为多行,只要把高度改下就行
<p class="nowrap">
很长很长的一句话,很长很长的一句话,很长很长的一句话,很长很长的一句话,很长很长的一句话,很长很长的一句话,
</p>
1.普通处理方式:
.nowrap{
width:200px;
overflow: hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
缺点:后面显示的省略号在不同的浏览器里边显示不大一样
如果把text-overflow的值改为clip,有些浏览器下回变成半个字,郁闷
2.变通处理方式
.nowrap{
height:14px;
overflow: hidden;
word-wrap:break-word;
word-break: break-all;
line-height:16px;
}
让其自动换行,高度设置为一行的高度,加了行高是避免2行太近会把下一行的顶部显示出来,当然可以扩展为多行,只要把高度改下就行