css设置文字两端对齐、text-align-last 和 text-align 区别

设置文本两端对齐的两种办法

div {
    
    
  text-align: justify; // 仅对块级/行内块元素 非最后一行 有效
}

// 多用于表单 label 文字数量不同时想让其文字均匀分布
.label {
    
    
  width: 200px;
  text-align-last: justify; // 仅对块级/行内块元素 最后一行 有效
}

text-align-last 和 text-align 的区别

• 两者都仅对 块级元素 有效

• text-align 针对多行文本，仅对多行文本中非最后一行文本有效，如果只有一行文本则无效

  • 行内块元素：仅对非最后一行有效
    

  • 块元素：仅对非最后一行有效
    

• text-align-last 多行文本、单行文本都仅对最后一行有效

  • 行内块元素：仅对最后一行有效
    

  • 块元素：仅对最后一行有效