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>

 

posted on 2022-04-08 09:13  码农小小海  阅读(1287)  评论(0)    收藏  举报

导航