文本段落輸入，相信大家都不陌生，不管是UI設(shè)計還是平面設(shè)計，總會遇到大量的文案段落需要填充。這個時候我們總會發(fā)現(xiàn)一些很影響效率的問題。

問題場景再現(xiàn)

假如我們需要設(shè)計一段文字，一般情況下是這樣做的。

看起來還行，至少不苛刻的需求是這樣的。但總會有需求說，列表數(shù)字和換行的數(shù)字都混一塊兒了不利于閱讀，能不能數(shù)字右邊的文本左對齊呢？

這個問題很多設(shè)計師的解決方案是加空格。

看起來也不錯，每個段落都加空格，就可以對齊了。

但是如果有幾十個列表呢？更可怕的是內(nèi)容如果后期修改，空格需要重新。那么如何快速方便地實現(xiàn)對齊效果呢？

首行縮進(jìn)

答案就是調(diào)整段落的首行縮進(jìn)屬性值。

首行縮進(jìn)最常用在文章段落開頭空兩個文字，從小到大寫作文，語文老師都是這么要求的……

PS的首行縮進(jìn)

AI的首行縮進(jìn)

我們一般用的都是正數(shù)，其實也可以輸入負(fù)數(shù)，這樣的話，首行縮進(jìn)是往左邊的移動的，從而就可以解決開頭的對齊問題了?？聪吕樱?/p>

首行縮進(jìn)的值跟文字大小有關(guān)。正常情況下開頭空兩格是空出文字大小x2。數(shù)字和英文是半個字符，例如圖中段落文字是12，那么左側(cè)需要“1、”空出來，一個中文字符+一個數(shù)字就是12+6=18。

其實段落首行縮進(jìn)在css中也有對應(yīng)的屬性叫 text-indent。上面的例子在css中也有同樣的解決方法，這里是一個demo，大家有興趣的可以看看。

大家有興趣可以動手改變css調(diào)下。以后再遇到這個問題，就可以幫前端同學(xué)解決問題了。

更多UI設(shè)計干貨文章請關(guān)注UI黑客

微信公眾號 uihacker