text-align的属性justify
text-align常用的属性是left、center、right，具体的可参考css解释，今天重点记录的对象是justify
justify 可以使文本的两端都对齐在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等
案例如下:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.content {width: 600px;height: 200px;border: 3px solid red;text-align: justify;}.content1{text-align: left;}</style></head><body><div class="content">Shanghai is the largest city by population in the People's Republic ofChina (PRC) and the largest city proper by population in the world. It isone of the four province-level municipalities of the PRC, with a totalpopulation of over 23 million as of 2010. It is a global city, withinfluence in commerce, culture, finance, media, fashion, technology, andtransport. It is a major financial center and the busiest container portin the world.</div><div class="content content1">Shanghai is the largest city by population in the People's Republic ofChina (PRC) and the largest city proper by population in the world. It isone of the four province-level municipalities of the PRC, with a totalpopulation of over 23 million as of 2010. It is a global city, withinfluence in commerce, culture, finance, media, fashion, technology, andtransport. It is a major financial center and the busiest container portin the world.</div></body>
</html>预览效果如下:
总结：
1、justify作用是使文本两端对齐
2、justify对元素没有效果，只对元素内文本生效
3、文本的最后一行或者使单独一行不生效
针对多行文本最后一行文本两端对齐不生效的处理方案
基本原则就是使最后一行的文本变成非最后一行
方案一：添加一行元素使其变为非最后一行
方案二：使用样式伪类的方法，使其变成非最后一行，推荐使用最后一种方式
案例如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.content {width: 600px;height: 200px;border: 3px solid red;text-align: justify;}.plan1{display:inline-block;width:100%;}.content::after{content: '';display:inline-block;width:100%;}</style></head><body><div class="content">Shanghai is the largest city by population in the People's Republic ofChina (PRC) and the largest city proper by population in the world. It isone of the four province-level municipalities of the PRC, with a totalpopulation of over 23 million as of 2010. It is a global city, withinfluence in commerce, culture, finance, media, fashion, technology, andtransport. It is a major financial center and the busiest container portin the world.<!-- <span class="plan1"></span> // 方案一 --></div></body>
</html>