前端开发 大前端 W3Cbest

一个专注 WEB 开发的技术博客

0%

CSS在单行文本开头添加省略号字符

css实现单行文本溢出显示省略号的方法大家应该在网上已经得到想要的答案了吧,就是用text-overflow:ellipsis属性来实现,当然还需要加宽度width属来兼容部分浏览。

实现方法:

.ellipsize-right{
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;
width: 200px;
}

See the Pen ellipsize-right by w3cbest.com (@w3cbest) on CodePen.

css的text-overflow:ellipsis文本溢出显示省略号功能非常棒,但本质上只在文本结尾实现省略字符串,假如我们想在文本的开头实现省略字符串,该怎么办?

那么今天我们就来实现以下这个疑问

.ellipsize-left {
/* 标准CSS省略号 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px;
/* 字符串的开头 */
direction: rtl;
text-align: left;
}

See the Pen ellipsize-left by w3cbest.com (@w3cbest) on CodePen.

若要在字符串的开头添加省略号,请使用RTL和text-align来剪辑字符串的开头!

坚持技术创作分享,您的支持将鼓励我继续创作!