欧派

移动端常见问题(单行和多行文字溢出省略)

徘徊边缘 提交于 2020-03-17 17:22:04
单行文字溢出省略: 给容器添加css样式: .text-ellipsis{ overflow:hidden; text-overflow: ellipsis; white-space: nowrap; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width:200px; background-color: lightblue; margin:0 auto; } .text-ellipsis{ overflow:hidden; text-overflow: ellipsis; white-space: nowrap; } </style> </head> <body> <div class="text-ellipsis"> 欧派整体橱柜定制简约现代 欧派整体橱柜定制简约现代欧派整体橱柜定制简约现代欧派整体橱柜定制简约现代 </div> </body> </html> 如果容器使用了flex布局: 此时单行文字省略会出问题 <!DOCTYPE html> <html lang="en">