美文网首页
CSS之文本两端对齐

CSS之文本两端对齐

作者: 大山里的前端攻城狮 | 来源:发表于2019-02-28 20:31 被阅读0次

说起text-align,大家一定都不觉得陌生,我们常用关键字left、right、center实现行内元素相对父元素左、右、居中对齐,当然我们也使用justify来实现文本两端对齐。

如上图,两端对齐相对于左对齐,视觉上显得整齐有序。但justify对最后一行无效,通常这样的排版对整段文字是极好的,我们并不希望当最后一行只有两个字时也两端对齐,毕竟这是不便于阅读的,那么当我们只有一行文本,但要实现单行文本两端对齐怎么解决(如下图的表单项效果)?

我是一名从事了5年前端的程序员,辞职目前在做讲师,今年年初整理了一份适合2019年学习的web前端干货,从最基础的HTML+CSS+JS到移动端HTML5到各种框架都有整理,免费送给每一位前端小伙伴,这里是小白聚集地,欢迎初学和进阶中的小伙伴。加微信:wwo2519

根据justify对最后一行无效,我们可以新增一行,使该行文本不是最后一行,实现如下:

but以上写法可以说是比较麻烦的,重点来啦,最近新了解到的一个属性text-align-last,该属性定义的是一段文本中最后一行在被强制换行之前的对齐规则。

相比第一种实现,第二种实现方式就简单了不少,不过该属性有兼容性问题,大家可以根据情况决定实现方式,想了解更多关于text-align-last的说明。

更多web前端学习资料、视频,加微信:wwo2519

相关文章

  • CSS之文本两端对齐

    说起text-align,大家一定都不觉得陌生,我们常用关键字left、right、center实现行内元素相对父...

  • CSS 常用效果整理

    整理场景的css 灵活运用CSS开发技巧 1、使用 text-align-last 对齐两端文本代码 ...

  • 前端笔记

    1. Css 1).使用 text-align-last 对齐两端文本 text-align-last: jus...

  • css文本两端对齐

    在做表单时我们经常遇到让上下两个字段对齐的情况,比如姓名, 手机号码, 出生地。这样我们就要用到 text-ali...

  • CSS文本两端对齐

    在实际工作中,有的时候需要实现两行字数不同的文字实现左右对齐,比如姓名和联系方式。下面我们就来演示一下如何实现这种...

  • css之基础-文本两端对齐

    在最近工作中遇到一个问题,遇到三行不一样长的block文本,想要使他变成三行一样长两端对齐的布局,效果如图 然后我...

  • CSS实现文本两端对齐

    CSS实现文本两端对齐 我们在制作表单时经常遇到控件前的label标签中文本长度不一,有时候为了美观,我们会采取文...

  • Flex 布局介绍

    HTML 多个元素在一行 CSS 多个元素水平居中对齐 多个元素水平两端对齐 多行多个元素水平两端对齐 多个元素在...

  • 04-CSS总结-持续更新中

    常用CSS 清除浮动 文字两端对齐 CSS属性兼容写法 transform box-sizing

  • [开发笔记] CSS篇

    1- 设置字间距 实现文本两端对齐 效果效果图 实现CSS代码 2- 使用background属性实现盒子仅四个角...

网友评论

      本文标题:CSS之文本两端对齐

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