text-align:justify使用心得

关于text-align:justify的使用心得

有时候我们会碰到下面这样的对齐方式


demo.jpg

一般限定宽度后设置text-align:justify,发现无效,这是因为text-align:justify;只对最后一行之前的行生效,当文本只有一行的时候,既是第一行,也是最后一行;所以只有一行的时候需要特殊处理。

这里有两种方式:
1.设置text-align-last:justify;不过text-align-last不是所有浏览器支持。例如safari。
2.加一个伪类

XXX:after {
        content: "";
        width: 100%;
        height: 0;
        margin: 0;
        display: inline-block;
        overflow: hidden;
      }

再来说下,多行的时候,既然文字从左到右已经排满了,那设置text-align为left center right justify有什么区别呢,看看这张图片你就懂了,上面是设置了justify,下面是没有样式的情况。


demo2.jpg
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,553评论 0 6
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,669评论 0 26
  • 100个常用的javascript函数 1、原生JavaScript实现字符串长度截取 复制代码代码如下: fun...
    老头子_d0ec阅读 373评论 0 0
  • css和js实现最简单的轮播图效果 html代码 1 2 3 4 css代码 /* 先取消默认样...
    老头子_d0ec阅读 112评论 0 0
  • 越来越懒了,但越来越清晰。 最近生活中,很少刷圈,很少写文章,很少晚睡,很少发文求赞,奔着中年大叔的模样渐行渐近。...
    津菘阅读 367评论 0 0