巧用css text-indent减小中文标点符号的占位大小

由于设计需要,我们的页面中经常会有如下效果:

效果图

可是我们实现出来的效果确实这样的:

实现效果图

看起来两行文本没有对齐嘛,仔细检查后原来是字符的原因,因为是中文标点符号占半个字的位置。不信?选中下汉字标点符号看一下即可。至于为什么会占半个字的位置,个人觉得可能是为了方便排版,标点符号也要占一个汉字的空间(想想小时候写的作文标点符号是不是都占一格)。标点符号相对于格子左对齐,所以自然一侧留下一半空间。具体原因求科普!查明原因即对症下药,既然中文标点符号占汉字半个位置,那么我们使用CSStext-indent:-.5em;样式修改即可。修改后的效果如下图所示:

修改后的效果图

text-indent:CSS1版本属性,规定文本块中首行文本的缩进。允许使用负值。如果使用负值,那么首行会被缩进到左边。可使用指定长度或百分比和inherit任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

emCSS3相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。

除了上述的使用,那么text-indent还有什么妙用呢?

  • 首行缩进两字符:text-indent:2em;
  • 隐藏字符:text-indent: -999em;
  • 更多玩法,等你发掘

扩展链接:

  1. CSS text-indent属性
  2. [text-indent:-9999px 字体隐藏问题

转载于:https://www.cnblogs.com/cjlll/p/6295644.html

  • 0
    点赞
  • 0
    收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页
评论
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值