文字超长省略打点

文字超长省略打点

在开发中, 有这么一种场景, 文本超长了，正常而言会是这样：

如果需要超长省略溢出打点, 如图:

可以使用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>