css3中设置文本段落溢出隐藏并追加省略号
总结:包裹文本的标签必须为块元素,不能靠内容撑开 因为溢出隐藏(总得有个边界触发溢出😀)
使用:
white-space: nowrap; /*设置不换行*/
overflow: hidden; /*设置溢出隐藏*/
text-overflow:ellipsis; /*文本隐藏触发事件:设置省略号*/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> span{ width: 100px; height: 20px; display: block; border: 1px solid red; white-space: nowrap; /*设置不换行*/ overflow: hidden; /*设置溢出隐藏*/ text-overflow:ellipsis; /*文本隐藏设置省略号*/ } </style> </head> <body> <span>万事如意学习如意生活如意赚钱赚钱如意睡觉如意如意如意</span> </body> </html>