css 文本移除及省略号位置

蒲公英与阿狸

已于 2022-10-11 14:21:25 修改

阅读量1.1k

点赞数

分类专栏： html 文章标签： css css3 html

于 2022-02-21 16:42:55 首次发布

本文链接：https://blog.csdn.net/weixin_40507164/article/details/123049238

版权

html 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

text-overflow: ellipsis;//text-overflow: clip|ellipsis|string;
clip属性值：文本字符在一定宽度点直接截断。

ellipsis属性值：字面意思我们就知道其临界点以省略号结束。

string属性值：就是溢出方式显示字符串可自定义，暂时Firefox浏览器可渲染其效果，应该还处于实验阶段。

三个值均以在一定宽度内，如果其宽度不足显示，text-overflow的属性值也会被截断。

 .list-item-name {
    width: 80px; 
    text-overflow: ellipsis;//text-overflow: clip|ellipsis|string;
    overflow: hidden;  
    white-space: nowrap;
  }

在这里插入图片描述

direction默认值是’ltr’，于是，上述未定义也是从左到右的顺序。
这里我们要改变其省略号到段前，我们只需要拼写direction: ‘rtl’ 即可。

 .list-item-name {
    width: 80px; 
    text-overflow: ellipsis;//text-overflow: clip|ellipsis|string;
    overflow: hidden;  
    white-space: nowrap;
     direction: rtl;//省略方向：ltr:省略号在右侧，rtl：省略号在左侧； 
  }

在这里插入图片描述