美文网首页UI设计中的技术、工具与效率
神奇的负值缩进,文本段落的另类对齐方式

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

作者: UI黑客 | 来源:发表于2018-11-22 16:20 被阅读5次

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

问题场景再现

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

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

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

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

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

首行缩进

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

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

PS的首行缩进

AI的首行缩进

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

首行缩进的值跟文字大小有关。正常情况下开头空两格是空出文字大小x2。数字和英文是半个字符,例如图中段落文字是12,那么左侧需要“1、”空出来,一个中文字符+一个数字就是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黑客官网http://www.uihacker.com/

UI黑客论坛http://bbs.uihacker.com/


相关文章

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

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

  • Excel姓名对齐方法

    1、选中列 2、点击对齐方式右下角小箭头 3、将文本对齐方式——>水平对齐改为:分散对齐(缩进) 缩进改为:1 4...

  • 笔记 | PHP 2012 | 文本控制 | 缩进/对齐/间距

    段落缩进 text-indent 文本对齐 text-align 文本装饰线 text-decoration 字间...

  • 文本处理常见问题

    首行缩进 text-indent 属性规定文本块中首行文本的缩进。 注释:允许使用负值。如果使用负值,那么首行会被...

  • CSS权威指南读书笔记-文本属性

    缩进和水平对齐 缩进文本 将Web页面上一个段落的第一行缩进使用text-indent text-indent

  • JQuery点击元素显示出来内容

    我需要注意什么:1.text-indent属性是控制文本缩进的,但是设置属性值为负值时,文本向左侧缩进,当负值过小...

  • CSS 文本格式

    缩进文本 text-indent 注释:允许使用负值。如果使用负值,那么首行会被缩进到左边。会产生一种“悬挂缩进”...

  • CSS(四)文本样式设置

    颜色表及HTML代码(部分) 文本样式 文本样式:对齐方式、文本修饰文本转换、文本缩进.... 作用:美化、修饰页...

  • 10天特训营之彻底搞定对齐和分页

    段落对齐 左对齐 居中对齐 右对齐 两段对齐 分散对齐(最后一行自动调整成一行) 标尺 首行缩进 悬挂缩进 左缩进...

  • CSS文本、字体、颜色

    文本样式 文本常用的样式 文本缩进:text-indent 设置段落元素的第一行缩进方式,属性值可为绝对值(px)...

网友评论

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

    本文链接:https://www.haomeiwen.com/subject/gzwlqqtx.html