好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

text-justify 对齐

text-justify

这个 属性 不怎么常用,因为它的兼容性不好,只兼容 IE 浏览器,它主要是给对齐 属性 text-align:justify 做 一个 补充。

1. 官方定义

改变字与字之 间的 间距使得每行对齐。

2. 解释

这个 属性 主要用来 页面 文字 的排版,如果我们 一个 段落不设置任何 属性 ,那么它的每一行有长有短,很不美观,通过这个 属性 ,可以让每一行都能实现左右对齐。

我们首先要设置 text-align:justify 然后再设置 text-justify 去告诉浏览器使用什么样的排版方式让 文字 对齐。而不设置 text-justify 浏览器则使用 默 认的方式让其实现两端对齐。

这个 属性 只兼容 IE 浏览器。而其他浏览器的对齐方式仅受 text-align:justify 对齐方式的影响。

3. 语法

   .demo   { 
     text-align  : justify ; 
     text-justify  : inter-word ; 
 } 
 

属性 值说明

值 描述 auto 浏览器自行渲染 none 禁用齐行。 inter-word 增加 /减少单词 间的 间隔。 inter-ideograph 用表意文本来排齐 内容 。 inter-cluster 只对不包含内部单词间隔的 内容 (比如亚洲语系)进行排齐。 distribute 类似报纸版面,除了在东亚语系中最后一行是不齐行的。 kashida 通过拉伸字符来排齐 内容 。

4. 兼容性

IE Edge Firefox Chrome Safari Opera ios android 9+ no no no no no no no

5. 实例

默 认 文字 排版。

        < div   class   =  " demo "   >  
        To a large degree,
        the measure of our peace of mind
        is deter mine d by how much we are
        able to live in the present moment.
       </ div  >  
       < div   class   =  " demo-1 "   >  
        轻轻的我走了,
        正如我轻轻的来;
        我轻轻的招手,
        作别西天的云彩。
        那河畔的金柳,
        是夕阳中的新娘;
        波光里的艳影,
        在我的心头荡漾。
        软泥上的青荇,
        油油的在水底招摇;
        在康河的柔波里,
        我甘心做一条水草!
       </ div  >  
 

   .demo   { 
     background  :   #f2f2f2  ; 
     margin-b ott om  :  px ; 
 } 
  .demo-1   { 
     background  :   #a2a2a2  ;             
 } 
 

效果 图

默 认 文字 排版 效果 图

说明:这两端字符第一段是英文,第二段是 中文 他们都没有实现两端对齐。 中文 还好,英文的排版最差,这是因为英文单词不像汉字,它长短不一。

下面我们通过设置 text-justify 中包含的各种 属性 来看看,他们都是怎么实现两端对齐的。

使用浏览器 默 认对齐方式。

   .demo   { 
     background  :   #f2f2f2  ; 
     margin-b ott om  :  px ; 
     text-align  : justify ;    
 } 
  .demo-1   { 
     background  :   #a2a2a2  ;    
     text-align  : justify ;             
 } 
 

   .demo   { 
     background  :   #f2f2f2  ; 
     margin-b ott om  :  px ; 
     text-align  : justify ;    
     text-justify  : auto ;  
 } 
  .demo-1   { 
     background  :   #a2a2a2  ;    
     text-align  : justify ;   
     text-justify  : auto ;            
 } 
 

效果 图

浏览器 默 认对齐方式 效果 图

说明:直接设置 text-align:justify; 就会实现 文字 两端对齐,对齐方式使用浏览器 默 认方式。

使用 inter-ideograph 来实现 文字 对齐。

   .demo   { 
     background  :   #f2f2f2  ; 
     margin-b ott om  :  px ; 
     text-align  : justify ;    
     text-justify  :  inter-ideograph ; 
 } 
  .demo-1   { 
     background  :   #a2a2a2  ;    
     text-align  : justify ;   
     text-justify  :  inter-ideograph ;     
 } 
 

效果 图

使用 `inter-ideograph` 来实现 文字 对齐 效果 图

说明:通过设置 inter-ideograph ,让IE浏览器使用表意文本对齐方式对齐 内容 。

使用 inter-word 来实现文本排版对齐。

   .demo   { 
     background  :   #f2f2f2  ; 
     margin-b ott om  :  px ; 
     text-align  : justify ;    
     text-justify  :  inter-word ; 
 } 
  .demo-1   { 
     background  :   #a2a2a2  ;    
     text-align  : justify ;   
     text-justify  :  inter-word ;     
 } 
 

效果 图

使用 `inter-word` 来实现文本排版对齐 效果 图

说明:如图所示, 文字 还是对齐了,如果和 inter-ideograph 的 效果 图对比还是有细微差别,它的对齐方式 修改 了单词之 间的 距离。所以说这只是 IE浏览器在对齐的时候一种排版方式。

使用 inter-cluster 来实现文本排版对齐。

   .demo   { 
     background  :   #f2f2f2  ; 
     margin-b ott om  :  px ; 
     text-align  : justify ;    
     text-justify  :  inter-cluster ; 
 } 
  .demo-1   { 
     background  :   #a2a2a2  ;    
     text-align  : justify ;   
     text-justify  :  inter-cluster ;     
 } 
 

效果 图

使用 `inter-cluster` 来实现文本排版对齐 效果 图

由此可见使用其他 属性 distribute 、 kashida 都只是改变 IE 浏览器的一种对齐方式。

6. 小结

要使用这个 属性 一定要先设置 text-align:justify; 且仅仅兼容 IE 浏览器。

text-overflow 文字超出 ? ?gradients 渐变

查看更多关于text-justify 对齐的详细内容...

  阅读:61次

上一篇

下一篇

第1节:CSS3简介    第2节:border 边框    第3节:borderImage 边框图片    第4节:border-radius 圆角    第5节:box-shadow 阴影    第6节:box-sizing 盒类型    第7节:gradients 渐变    第8节:text-justify 对齐    第9节:text-overflow 文字超出    第10节:text-shadow 文本阴影    第11节:word-break 文本打断    第12节:word-wrap 文本换行    第13节:letter-spacing 字间距    第14节:perspective 透视    第15节:transform 2D 空间转换    第16节:transform 3D 空间转换    第17节:transition 过渡    第18节:animation 动画    第19节:columns 字符分割    第20节:flex 弹性盒子布局    第21节:flex order 顺序    第22节:flex: grow、shrink、basis    第23节:flex-direction 排列方向    第24节:justify-content (轴内)对齐方式    第25节:flex-wrap 换行    第26节:align-items 竖直方向对齐方式    第27节:align-content    第28节:Grid 布局简介    第29节:Grid 行和列    第30节:media 媒体查询    第31节:only 元素选择    第32节:before && after 位置    第33节:nth 类型元素选择器    第34节:calc 计算属性