DeathGhost

CSS 省略文本字符串开头与结尾 无聊的小测试

这篇文章发布于 2019年03月13日 22:49 星期三 阅读 432 次,评论 0 条

DeathGhost 编辑,归类于css »

我们都知道CSS3(均以CSS称之)中属性text-overflow可以对溢出文本进行截取、显示省略号或自定义字符串。

text-overflow CSS 属性确定如何向用户渲染未显示的溢出内容信息。它可以被裁剪,显示一个省略号或显示一个自定义字符串。

我们都知道这个属性只对那些在块级元素在一定宽度溢出的内容有效,同时需配合white-space: nowrap与overflow: hidden属性,方可渲染其属性值。这样也就避免了使用JavaScript进行字符串截取处理。

先再次看看其语法:

text-overflow: clip|ellipsis|string;

通常情况下,我们渲染效果一般都会选择 ellipsis 属性值进行修饰,从而达到文本溢出省略的效果。

clip属性值:文本字符在一定宽度点直接截断。

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

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

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

示例代码:

border: 1px orangered solid;
color: orangered;
padding: 1em;
width: 12em;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
<p>CSS3也是对其原CSS的一种升级与拓展,更为充分的渲染页面提升页面性能。</p>
text-overflow
CSS 省略文本字符串开头与结尾

这是常规下的段末省略,那么段前省略又如何呢(这是一个没有用的小测试🤣

我们可以借助CSS中的文本方向属性 direction 定义其方位。

direction默认值是'ltr',于是,上述未定义也是从左到右的顺序。

这里我们要改变其省略号到段前,我们只需要拼写direction: 'rtl' 即可。

...
direction: rtl;

是不是很好玩呀,写完之后感觉甚是无聊😅😅😅,就这样吧。

用户评论(当前评论共计0条)

⚠️ 评论内容需要审核方可显示。
DeathGhost

孙志锋

视觉前端爱好者

志于道,据于德,依于仁,游于艺。


孙志锋more,08年毕业于外事EC专业,从事5年服装B2C运营管理于杭;现,西安从事IT领域前端设计开发工作。
4

目录

32

文章

11

评论

🙏 到访,就是一种鼓励,谢谢你的到访!🙏

💕与君共勉💕