文字溢出 · 2021 web前端工程师

# 溢出文字绝技 ``` /*1.先强制一行内显示文本*/ white-space: nowrap; /*2.超出的部分隐藏*/ overflow: hidden; /*3.文字用省略号替代超出的部分*/ text-overflow: ellipsis; ``` ## 自定多行文字后隐藏 ``` display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3 ; overflow: hidden; ``` ![](https://img.kancloud.cn/3f/1d/3f1d1614123ccfa1b8285e1cbfb63437_1076x645.png) ![](https://img.kancloud.cn/d9/1a/d91abde4efec4259daa59c6811f74042_608x318.png) | ![](https://img.kancloud.cn/92/cc/92cc20340809f14be63c4b56d0ceba34_881x325.png) | ![](https://img.kancloud.cn/50/a4/50a4c14ebcae7057b3493f91821f869e_1015x378.png) | | --- | --- | | ![](https://img.kancloud.cn/f8/13/f813f7b586313bbe851a2ef6aa1ee77c_244x101.png) | ![](https://img.kancloud.cn/9c/c3/9cc31e79b52d3c69b7f56444aa1d0c9e_436x97.png) | | ![](https://img.kancloud.cn/09/98/0998f8cf45d5d8f5884bb12d95375576_1049x525.png) | ![](https://img.kancloud.cn/97/dd/97dd74fed681f7d3dcd5ef070786daa1_356x128.png) |