首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

神奇的负值缩进,文本段落的另类对齐方式

文本段落输入,相信大家都不陌生,不管是UI设计还是平面设计,总会遇到大量的文案段落需要填充。这个时候我们总会发现一些很影响效率的问题。

问题场景再现

假如我们需要设计一段文字,一般情况下是这样做的。

看起来还行,至少不苛刻的需求是这样的。但总会有需求说,列表数字和换行的数字都混一块儿了不利于阅读,能不能数字右边的文本左对齐呢?

这个问题很多设计师的解决方案是加空格。

看起来也不错,每个段落都加空格,就可以对齐了。

但是如果有几十个列表呢?更可怕的是内容如果后期修改,空格需要重新。那么如何快速方便地实现对齐效果呢?

首行缩进

答案就是调整段落的首行缩进属性值。

首行缩进最常用在文章段落开头空两个文字,从小到大写作文,语文老师都是这么要求的……

PS的首行缩进

AI的首行缩进

我们一般用的都是正数,其实也可以输入负数,这样的话,首行缩进是往左边的移动的,从而就可以解决开头的对齐问题了。看下例子:

首行缩进的值跟文字大小有关。正常情况下开头空两格是空出文字大小x2。数字和英文是半个字符,例如图中段落文字是12,那么左侧需要“1、”空出来,一个中文字符+一个数字就是12+6=18。

知识扩展:html中的首行缩进

其实段落首行缩进在css中也有对应的属性叫 text-indent。上面的例子在css中也有同样的解决方法,这里是一个demo,大家有兴趣的可以看看。

大家有兴趣可以动手改变css调下。以后再遇到这个问题,就可以帮前端同学解决问题了。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180920G0ZXMB00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券