获取文章，显示时自动换行（word-break与 work-wrap的区别）

HTML:<div class="na-i">
    <span> </span>
</div>
样式：.na-i{
    overflow-y: scroll;
    overflow-x: auto;
    height: auto;
    position: relative;
    margin: 0 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    border-bottom: 1px solid #DEDEDE;
}
.na-i span {
    90%;
    word-wrap:break-word;
}
JQuery：$(function(){
    $.get(
            'http://name/get?login='+login+'&access_token='+tok+'',function(data){
                if(data.status == 200){
                   // alert('成功！');

if(data.data.desc == ''){ //判断内容是否为空
    $('.top2').hide();
    $('#rzheng2').hide();
}

$('.na-i span').text(data.data.desc);

             }
          }
      )
})

1、word-wrap:【换行】
定义：允许长单词或 URL 地址换行到下一行。
默认值： normal
normal：只在允许的断字点换行（浏览器保持默认处理）。
break-word：在长单词或 URL 地址内部进行换行。
值

normal	只在允许的断字点换行（浏览器保持默认处理）。
break-word	在长单词或 URL 地址内部进行换行。

 

  2、word-break:【断词】

  定义：规定自动换行的处理方法.   注：通过word-break使用，可以实现让浏览器在任意位置换行。

normal	使用浏览器默认的换行规则。
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行。

列子如图：

总结：

word-break:当行尾放不下一个单词时，决定单词内部怎么摆放 => 决定句子末尾放不下单词时，单词是否换行

    break-all：强行摆放，挤不下剩下的就换下一行显示。

    keep-all：放不下，就另外起一行展示；如果还放不下就溢出显示。

word-wrap：当行尾放不下时，决定单词内是否允许换行 => 决定单词内该怎么换行

    normal：单词太长，换行显示，在超过一行就溢出显示。

    break-word：当单词太长时，先尝试换行；换行后还是太长，单词内还可以换行。

附：

overflow-x属性：所有主流浏览器都支持 overflow-x 属性
overflow-x 属性规定是否对内容的左/右边缘进行裁剪 - 如果溢出元素内容区域的话
值

visible	不裁剪内容，可能会显示在内容框之外。
hidden	裁剪内容 - 不提供滚动机制。
scroll	裁剪内容 - 提供滚动机制。
auto	如果溢出框，则应该提供滚动机制。
no-display	如果内容不适合内容框，则删除整个框。
no-content	如果内容不适合内容框，则隐藏整个内容。