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

lemanli 发布于2019-08-01 15:34 / 746人阅读

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

文字越界添加...显示

在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;
    }

（完）

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49980.html

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

摘要：文字越界添加显示在页面上，会遇到当文字长度超出一定长度的时候，将超出的部分显示为的情况，这个功能很好实现，很多人都可以直接写出来。文字越界添加...显示在HTML页面上，会遇到当文字长度超出一定长度的时候，将超出的部分显示为...的情况，这个功能很好实现，很多人都可以直接写出来。示例代码： .demo { display: block; text-overflow:...

SwordFly 2019-08-29 11:05 评论0 收藏0
SegmentFault 技术周刊 Vol.38 - 神奇的 CSS

摘要：层叠即表示允许以多种方式来描述样式，一个元素可以被渲染呈现出多种样式。可以让属性的变化过程持续一段时间，而不是立即生效。比如，将元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用后，将按一个曲线速率变化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全称是 Cascading Style Sheet...

elliott_hu 2019-08-29 13:56 评论0 收藏0
前端基础入门二（CSS）

摘要：输入的时候少按一个键浏览器兼容问题比如使用的选择器命名，在是无效的能良好区分变量命名变量命名是用不要纯数字中文等命名，尽量使用英文字母来表示。选择器和类选择器最大的不同在于使用次数上。当需要设置英文字体时，英文字体名必须位于中文字体名之前。回顾上一节HTML 思维导图 showImg(https://segmentfault.com/img/bVbno3O?w=1378&h=1178...

Lorry_Lu 2019-08-30 15:55 评论0 收藏0
CSS节选——选择器

摘要：，，层叠样式表，请留意层叠概念。为了区分伪类和伪元素，伪元素采用双冒号写法。常见伪类。常见伪元素。和伪元素的用法和下特有的，用于在渲染中向元素逻辑上的头部或尾部添加内容。CSS，cascading style sheet，层叠样式表，请留意层叠概念。 css3为了区分伪类和伪元素，伪元素采用双冒号写法。常见伪类——:hover,:link,:active,:targ...

番茄西红柿 2019-04-23 13:42 评论0 收藏0