获取文章，显示时自动换行（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 {
width: 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	如果内容不适合内容框，则隐藏整个内容。

转载于:https://www.cnblogs.com/mo-cha/p/5728719.html