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

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

Author: DeathGhost
Published: 2019-03-13 22:49:47
Category: css
Canonical: https://www.deathghost.cn/article/css/45
Keywords: CSS, CSS3, text-overflow, 截取字符串, 省略号, 自定义字符串, white-space, overflow, direction

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](https://www.deathghost.cn/public/upload/article/2019/03/1552488538619.jpg)

CSS 省略文本字符串开头与结尾

这是常规下的段末省略，那么段前省略又如何呢（这是一个没有用的小测试）?？

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

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

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

...
direction: rtl;
是不是很好玩呀，写完之后感觉甚是无聊???，就这样吧。

## Related

- Previous: [box-decoration-break处理行内元素跨行跨列断裂样式渲染的完整性](https://www.deathghost.cn/article/css/43)
- Next: [CSS container容器查询](https://www.deathghost.cn/article/css/112)