[译]CSS高级技巧:自动省略左侧文本

难以置信! 浏览器和CSS规范居然支持自动省略左侧的文本了。 通过 text-overflow: ellipsis , 搭配固定的 width 属性, 以及 overflow: hidden 样式, 就可以实现这样的功能; 能用CSS实现，就不需要编写复杂的 JavaScript 代码来计算字符串宽度, 或者进行截断了. CSS的自动省略特性, 对无障碍环境也非常友好。

text-overflow: ellipsis 特性是很强大, 但其本身只能省略右侧文本;

如果想省略左边的文本怎么办呢?

这种需求还是很常见的: 比如, 有很多个文件路径, 其中有许多文件的目录是一模一样的, 这时候只显示最右侧的文本, 明显会比较合理。

下面介绍一个小技巧, 让自动省略出现在左边!

CSS样式

自动省略左侧文本, 和自动省略右侧文本的样式基本一致, 只是多了一点小技巧:

.ellipsize-left {
    /* 常规的CSS省略 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 200px;

    /* 让省略符显示在文本左侧 */
    direction: rtl;
    text-align: left;
}

我们需要指定 text-align 样式, 并指定方向为RTL, 来自动裁剪左侧文本!

RTL, right to left, 从右到左;

LTR, left to right, 从左到右;

参考: https://developer.mozilla.org/en-US/docs/Web/CSS/direction

使用 text-align 和RTL来实现自动省略左侧文本的CSS特效, 是一个非常精巧的设计; 也许未来会很普及, 但现在这个技巧还很高端, 会的人不多!

在线Demo

在线Demo页面的地址为: https://davidwalsh.name/demo/css-left-ellipsis.php

从中可以看到,

相关的CSS代码如下:

<style type="text/css">
    .ellipsize-me {
        white-space: nowrap;
	/* 很显然,overflow的值不能是: visible */
        overflow: hidden;
        text-overflow: ellipsis;
        direction: rtl;
        text-align: left;
        width: 200px;
        border: 1px solid #999;
        padding: 10px;
    }
</style>

HTML代码如下:

<p class="ellipsize-me">
    first > second > third<br>
    second > third > fourth > fifth > sixth<br>
    fifth > sixth > seventh > eighth > ninth
</p>

显示效果类似这样:

first > second > third
...ourth > fifth > sixth
...nth > eighth > ninth

其中的省略符( ... )是不可选择的。

效果截图:

原文链接: https://davidwalsh.name/css-ellipsis-left

Demo地址: https://davidwalsh.name/demo/css-left-ellipsis.php

翻译人员: 铁锚 - https://blog.csdn.net/renfufei

翻译日期: 2018年12月21日