WXSS/CSS萌新技巧Get——text-indent

时间:2022-12-10 09:56:26

居家半个月兴起打算学习一下小程序开发,以此为契机注册了51博客,又被新人福利送鼠标垫所吸引(旧鼠标垫搬家时丢了),于是就从这里,开始学着写博客吧!

text-indent的作用是给文本加上首行缩进,填入的值即缩进量,和word中的首行缩进效果一样。正值向右缩进,负值向左。

在学习案例的时候发现这个属性通常会填到-9999em,没错,这个缩进量的文本早已不知飞到哪里去了。那为啥不直接删除?因为消失的文本也是有作用的啦~

在设计时为了更好的视觉效果,通常会用图片作为按钮实现链接的跳转,然而在网页加载时,如果样式和图片还没被加载出来,如果没有文本信息,这个地方就会是一片空白。所以应该给链接按钮保留文本信息,在没有WXSS/CSS裸奔的时候用户也能知道这一大块空白是啥玩意儿。其次文本的保留也便于浏览器检索。不过该属性只适用于块级元素block,在其他情况下可以选择使用overflow: hidden。

WXSS/CSS萌新技巧Get——text-indent

WXSS/CSS萌新技巧Get——text-indent

对行内元素无效

算是学到了一个小技巧,记录一下~