css系列---【css实现div超出隐藏出现省略号,鼠标悬浮显示效果】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .box{ /* 单行省略 */ /* width: 100px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; */ /* 多行省略 */ overflow: hidden; /* text-overflow: ellipsis; */ display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 2; -webkit-box-orient: vertical; } </style> <body> <div class="box" title="显示全部得内容">新文化最新消息股票这公告一出_明日或将上涨,触底将会反弹_散户注意_输入代码紧急诊股,新文化最新消息股票_快速布局超跌反弹股!满仓买进好时机!后期走势有望成为本月优股!超跌反弹股!满仓买进好时机!后期走势有望成为本月优股!</div> </body> <script> </script> </html>