css实现文字越界加点点点显示，并且后面紧跟一个图标

2016-08-03 22:49:00

文字越界添加...显示

在HTML页面上，会遇到当文字长度超出一定长度的时候，将超出的部分显示为...的情况，这个功能很好实现，很多人都可以直接写出来。
示例代码：

.demo {
    display: block;
    text-overflow: ellipsis; //显示省略符号来代表被修剪的文本，也可以自定义
    overflow: hidden; //溢出内容隐藏
    white-space:nowrap; //强制文本在一行内显示
}

在文字后面，添加图标

有时候会遇到复杂的情况，需要在这段文字后紧跟一个图标，当文字溢出时，图标照常显示在后面。示例如下，图中的12是一直要显示的：

这种情况下，就需要对标签布局进行处理才行，因为 text-overflow 的起作用环境是一个 ‘block’ 状态下的父元素容器里。

示例代码：




                Text 1 Text 2 Text 3 Text 4 Text 5
                12

    .inline-wrap {
        display: inline-block;
        max-width: 100%;
    }
    .block-wrap {
        width: 100%;
    }
    .block {
        position: relative;
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding-left: 20px;
    }
    .icon {
        position: absolute;
        width: 20px;
        right: 0;
    }

（完）

关键字：css, html, html5, text

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击举报进行投诉反馈！