栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

两则文字样式需求

CSS教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

两则文字样式需求

工作中遇到两个文字样式的需求,因以前对相关部分CSS属性太久不用且疏于考究,不能第一时间命中最优方案,故在此简单做个整理。

需求一、使按钮上的每个文字间隔一定距离并居中
  • 效果图

  • 方案1 letter-spacing

    该样式会在每个文字后方多出一段间距,最后一个空白间距会导致文字不居中。

    hack的方式是用text-indent在文字前增加空白来平衡。

  • 方案2 word-spacing (推荐)

    该样式没有尾部空白的问题,但应用时须要将每个字分隔开才行。

    在每个汉字之间插入空格。

需求二、表单前方label文字两端对齐
  • 效果图
  • 方案1 text-align:justify

    该两端对齐样式对段落中的最后一行是无效的。使用时可用:after在其尾部追加一个宽度为100%的伪元素,但伪元素会带来一个行高,需根据具体情况另外处理。
    text-align还有个开发中的值 justify-all,字面上看上去似乎是可用来解决最后一行的两端对齐问题,但目前没有任何可测试的条件。

  • 方案2 text-align-last:justify (推荐)

    该属性所有行文字都会两端对齐,兼容性也不错。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/242234.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号