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 &gt; second &gt; third<br>




 second &gt; third &gt; fourth &gt; fifth &gt; sixth<br>
 fifth &gt; sixth &gt; seventh &gt; eighth &gt; ninth
</p>

顯示效果類似這樣:

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

其中的省略符()是不可選擇的。
效果截圖:

這裏其實也演示了CSDN博客新出的一個小功能, MarkDown編輯器中讓圖片居中。
只需要在圖片路徑後面, 加上hash #pic_center 即可。例如:

![](20181221115831570.png#pic_center)

你可以查看上面居中圖片的URL。
原文鏈接: https://davidwalsh.name/css-ellipsis-left
Demo地址: https://davidwalsh.name/demo/css-left-ellipsis.php
翻譯人員: 鐵錨 - https://blog.csdn.net/renfufei
翻譯日期: 2018年12月21日