博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

css中的text-overflow

Posted on 2016-03-02 10:34  王红--前端  阅读(228)  评论(0)    收藏  举报

css中的text-overflow

HTML中：

<body>
<div class="clip">此处中多余的文字直接被切掉，不显示</div>
<div class="ellipsis">此处中多余的文字将用省略号代替</div>
</body>

 

css中：

<style>
    .clip{
        width:100px;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:clip;
    }
    .ellipsis{
        width:100px;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
    }
</style>