<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.test {/* html中没有br,但是不能在指定的位置换行 */
width: 160px;
background-color: rgba(1,1,1,0.4);
text-align: justify;
/*text-align:justify;
text-justify:distribute-all-lines;
text-align-last:justify;*/
}
.test1 {/*html中没有br,可以在指定位置还行*/
width: 160px;
background-color: rgba(1,1,1,0.4);
text-align: justify;/*将所有行拉开两端对齐,在这种情况字少的行拉不开*/
text-align-last: justify;/*使用这个将拉不开的拉开,最后一行也会拉开。需要在最后一行改变行级元素的特性 如：.test1 span {display: inline-block;}*/
/*text-align:justify;
text-justify:distribute-all-lines;
text-align-last:justify;*/
}
.test1 span {
display: inline-block;
}
</style>
</head>
<body>
<p class="test">
通过回购交易进行套利，具体操作是通过回购业务将持有的债券质押融资，融得的资金又继续投入到债券市场，从而获得杠杆收入。
</p>
<p class="test1">
通过回购交易进行套<br/>利，具体操作是通过回<br/>购业务将持有的债券质<br/>押融资，融得的资金又<br/>继续投入到债券市场，<br/><span>从而获得杠杆收入。</span>
</p>
</body>
</html>处理两端对齐
1. 使用编辑器后台编辑的 前端先用 white-space: initial !important; 处理，再用text-align:justify;
2.
<style>
.distribCol1{text-align:justify; text-justify:distribute-all-lines; text-align-last:justify; text-indent:10px; width:140px}
</style>
<div class="distribCol1">
还要注意的是：要两端对齐的前提就是内容必须超过一行，所以，要解决最后一行元素无法两端对齐的文字其实很简单，就是在列表（或文字段）的最后创建一个高度为0的宽度100%的透明的inline-block的标签层就可以了。
除了上面语义化的问题，为了兼容IE6/7，使用text-align:justify时需要结合另外一个IE私有属性：text-justify:inter-ideograph ；
text-justify语法：
text-justify : auto |inter-word | newspaper | distribute | distribute-all-lines | inter-ideograph
text-justify参数
auto：允许浏览器用户代理确定使用的两端对齐法则 ；
inter-word：通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法。它的两端对齐行为对段落的最后一行无效 ；
newspaper ：通过增加或减少字或字母之间的空格对齐文本。是用于拉丁文字母表两端对齐的最精确格式 ；
distribute：处理空格很像newspaper，适用于东亚文档。尤其是泰国 ；
distribute-all-lines：两端对齐行的方式与distribute相同，也同样不包含两段对齐段落的最后一行。适用于表意字文档 ；
inter-ideograph：为表意字文本提供完全两端对齐。他增加或减少表意字和词间的空格。
因此我们要把text-align:justify;text-justify:inter-ideograph;放在一起来兼容IE浏览器：
乍一看IE6/7和FF、Chrome差异很大，但这个差异并不是text-align:justify引起的，事实上IE6/7已经实现了text-align:justify的功能，只是我们无意中触发了IE的经典bug,这里就不再赘述。
其实这个问题很好解决：进度条用图片代替背景色就OK了。