怪味曹小豆

导航

超出div宽度部分文字以省略号显示

一、效果图

二、实现代码

（关键代码：text-overflow: eclipsis;overflow:hidden;white-wrap:nowrap 使超出div宽度部分文字以省略号显示）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text-overflow用法</title>
    <style>
        .ellipsis,
        .clip {
            width: 100px;
            height: 40px;
            overflow: hidden;
            white-space: nowrap;
        }
        .ellipsis {
            background: #ccc;
        }
        .clip {
            background: pink;
        }


    </style>
</head>
<body>
    <div class="box">
        <div class="ellipsis" style="text-overflow: ellipsis;">我要省略啦showtime</div>
        <div class="clip" style="text-overflow: clip">我要截断啦showTime</div>
    </div>
</body>
</html>
View Code

 

 

posted on 2019-11-04 14:21  怪味曹小豆  阅读(509)  评论(0)  编辑  收藏  举报