css文本溢出显示省略号,
单行文
<div class="test"> asadsadsadsasadasdsadadasa</div> <pre name="code" class="html"> .test{ width: 50px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }省略号要和文字底部对齐 得是微软雅黑,宋体不行的,默认字体,firefox是下对齐,chrome不是
多行文本
<div class="test1"> asadsadsadsasadasdsadadasaasadsadsa dsasadasdsadadasaasadsadsadsasadasdsadadasaasadsadsadsasadasdsadadasaa sadsadsadsasadasdsadadasaasadsadsadsasadasdsadadasa</div> .test1{ height: 60px; width: 50px; display: -webkit-box; display: -moz-box; overflow: hidden; text-overflow: ellipsis; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp:3; }
line-clamp firefox占不支持 适合用于移动端