CSS控制文本两端对齐对最后一行无效解决方法

2021-05-24 0 1,368 百度已收录

做前端的朋友对text-align这个属性肯定是在熟悉不过了,经常用left、right、center来控制行内元素相对父元素左、右、居中对齐排版,justtify来实现文本的两端对齐,让一段多行文本看起来更方便阅读,排版更好看。
CSS控制文本两端对齐对最后一行无效解决方法
两端对齐相对于左对齐,视觉上显得整齐有序。但justify对最后一行无效,通常这样的排版对整段文字是极好的,我们并不希望当最后一行只有两个字时也两端对齐,毕竟这是不便于阅读的,那么当我们只有一行文本,但要实现单行文本两端对齐怎么解决(如下图的表单项效果)?
CSS控制文本两端对齐对最后一行无效解决方法
根据justify对最后一行无效的特性,我们可以新增一行,使该行文本不是最后一行,实现如下:

  1. <div class="item">
  2.     <span class="label" >{{item.label}}</span>
  3.     <span class="value">{{item.value}}</span>
  4. </div>
  5.  
  6. //css
  7. .item {
  8.     height: 32px;
  9.     line-height: 32px;
  10.     margin-bottom: 8px;
  11.     .label {
  12.         display: inline-block;
  13.         height: 100%;
  14.         width: 100px;
  15.         text-align: justify;
  16.         vertical-align: top;
  17.         &::after {
  18.             display: inline-block;
  19.             width: 100%;
  20.             content: '';
  21.             height: 0;
  22.         }
  23.     }
  24.     .value {
  25.         padding-right: 10px;
  26.     }
  27. }

但其实上面这种写法是比较麻烦的,在这样的情况下,我们可以学习一个属性text-align-last,该属性定义的是一段文本中最后一行在被强制换行之前的对齐规则。

  1. .item {
  2.     margin-bottom: 8px;
  3.     .label {
  4.         display: inline-block;
  5.         height: 100%;
  6.         min-width: 100px;
  7.         text-align: justify;
  8.         text-align-last: justify;
  9.     }
  10.     .value {
  11.         padding-right: 10px;
  12.     }
  13. }

相比第一种方法,第二种实现方式就简单了不少,不过该属性有兼容性问题,大家可以根据情况决定实现方式。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!3308869544
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有猫币奖励和额外收入!

主题镇 WP教程 CSS控制文本两端对齐对最后一行无效解决方法 https://zhutizhen.com/15022.html

永远为用户服务的镇长!

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或联络我们。
查看详情

相关文章