如何通过CSS让多余溢出文本显示省略号?

发送到手机
使用"扫一扫"即可发送至手机

如何通过CSS让多余溢出的单行文本或表格显示省略号?

网站开发中,做好了一个漂漂亮亮的网站,兴高采烈的去欣赏,但总是会遇到让人很dan疼的事情。

就比如程序员没有限制字符串长度,让布局撑开了,变的支离破碎,然后又跑去找程序员,让后他淡定的说了一句“不要在意这些细节”,尼玛这叫细节。通过苦查css,小编终于发现原来css也可以让多余溢出文本显示省略号,限制文终于可以淡定一下了。废话不多说如下:

element{
    height:24px;
    line-height:24px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

在表格:

table{
    table-layout:fixed;
}
td{  
    height:24px;
    line-height:24px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

注意:只限单行文本



如何通过CSS让多余溢出文本显示省略号?

如何通过CSS让多余溢出文本显示省略号?

分享: