文字超长省略打点

文字超长省略打点

在开发中, 有这么一种场景, 文本超长了,正常而言会是这样:
在这里插入图片描述
如果需要超长省略溢出打点, 如图:
在这里插入图片描述
可以使用css来处理: overflow: hidden; text-overflow: ellipsis;white-space: nowrap;

<div>
    测试超出后文字打点
div>

<style>
    div{
        width: 100px;
        height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        border:1px solid #ccc;
    }
style>

如果想要实现头部省略打点, 尾部完全展示, 可以使用direction: rtl;来实现
在这里插入图片描述

<div>
    测试超出后文字打点
div>
<style>
   div{
        width: 100px;
        height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        border:1px solid #ccc;
        direction: rtl;
    }
style>

你可能感兴趣的:(css,前端,css)