今天项目中有段过长的文字分成几行不美观，于是就想起了能用省略号代替的方法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ width: 150px; border: 1px solid #ccc; text-overflow: ellipsis;/*超出的文字用省略号代替*/ white-space: nowrap;/*禁止换行*/ overflow: hidden; } </style> </head> <body> <div>kobekobekobekobekboek boekboekberofd fdsfdsfsdfsdfsdf</div> </body> </html>
text-overflow这个属性需要和overflow和white-space配合使用才会有效果。