text-overflow实现数据可视化大屏文本滚动自适应伸缩隐藏-阿里云开发者社区

text-overflow实现数据可视化大屏文本滚动自适应伸缩隐藏

2023-07-23 56

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： text-overflow实现数据可视化大屏文本滚动自适应伸缩隐藏

数据可视化大屏在实际开发中，必须考虑到大屏的自适应。文本的自适应性是不可避免的功能开发。在此过程中，CSS的text-overflow是不可或缺的手段。

演示效果

正常显示

自适应代码

CSS核心代码

/*最新提报项目*/
.newProject {
    width: 100%;
    height: 90%;
    float: left;
    overflow: hidden;
    margin-top: 5px;
    cursor: pointer;
}
.newProject li {
    line-height: 30px;
    height: 30px;
    border-bottom: 1px solid rgba(0, 52, 127, 0.5);
}
.newProject li span {
    display: inline-block;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /*clip*/
}
.newProject li span:first-child {
    width: 40%;
}
.newProject li span:nth-child(2) {
    width: 37%;
    text-align: center;
}
.newProject li span:nth-child(3) {
    text-align: right;
    width: 23%;
}

CSS代码解析

    display: inline-block;
    width: 40%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /*clip*/

display: inline-block，必须是块元素；

width，必须限制宽度，否则无效；

white-space，段落中的文本不进行换行；

overflow，自动隐藏；

text-overflow，文本的溢出方式：ellipsis，显示省略符号 …

来代表被修剪的文本；clip，剪切文本；string，使用给定的字符串来代表被修剪的文本。

代码延伸（鼠标滑过显示全部文本）

CSS代码

div.test
{
  white-space:nowrap; 
  width:12em; 
  overflow:hidden; 
}
div.test:hover
{
  text-overflow:inherit;
  overflow:visible;
}

HTML代码

<div class="test" style="text-overflow:ellipsis;">text-overflow实现数据可视化大屏文本滚动自适应伸缩隐藏</div>
<br>
<div class="test" style="text-overflow:clip;">text-overflow实现数据可视化大屏文本滚动自适应伸缩隐藏</div>

@lockdata.cn