神奇的負值縮進,文本段落的另類對齊方式

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

問題場景再現(xiàn)

假如我們需要設計一段文字,一般情況下是這樣做的。

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

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

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

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

首行縮進

答案就是調整段落的首行縮進屬性值。

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

PS的首行縮進

AI的首行縮進

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

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

知識擴展:html中的首行縮進

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

http://www.uihacker.com/wp-content/uploads/2018/03/paragraph.html

大家有興趣可以動手改變css調下。以后再遇到這個問題,就可以幫前端同學解決問題了。



更多UI設計干貨文章請關注UI黑客

微信公眾號 uihacker

UI黑客官網(wǎng)http://www.uihacker.com/

UI黑客論壇http://bbs.uihacker.com/


?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容