您的位置:首页 > 其它

当justify遇上了 

2015-12-09 13:18 447 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1 style="background:#f60;color:#fff;">第一个是正常的想要的效果,但是服务器传过来的段落都带有&nbsp;然后就出现了一系列问题</h1>
<p style="width:300px;border:1px solid #ccc;text-align:justify;font:14px/20px '微软雅黑';">
At the age of 4, my daughter has become an environmental refugee.At the age of 4, my daughter has become an environmental refugee.At the \age of 4, my daughter has become an environmental refugee.At the age of 4, my
daughter has become an environmental refugee.At the age of 4, my daughter has become an environmental refugee.At the age of 4, my daughter has
become an environmental refugee.At the age of 4, my daughter has become an environmental refugee.
At the age of 4, my daughter has become an environmental refugee.
</p>
<h1 style="background:#f60;color:#fff;">有了&nbsp;之后,变成这样。。。怎么超出框了</h1>
<p style="width:300px;border:1px solid #ccc;text-align:justify;font:14px/20px '微软雅黑';">
At the age of 4, my daughter has become an environmental refugee.At the age of 4, my daughter has become an environmental refugee.At the \age of 4, my daughter has become an environmental refugee.At the age of 4, my 
daughter has become an environmental refugee.At the age of 4, my daughter has become an environmental refugee.At the age of 4, my daughter has 
become an environmental refugee.At the age of 4, my daughter has become an environmental refugee.
At the age of 4, my daughter has become an environmental refugee.
</p>
<h1 style="background:#f60;color:#fff;">然后想用word-wrap:break-word,word-break:normal来自动换行....结果发现段落中敲了回车的地方不是被解析成一个空格的间隙了</h1>
<p style="width:300px;border:1px solid #ccc;text-align:justify;font:14px/20px '微软雅黑';word-wrap: break-word;word-break: normal; ">
At the age of 4, my daughter has become an environmental refugee.At the age of 4, my daughter has become an environmental refugee.At the \age of 4, my daughter has become an environmental refugee.At the age of 4, my 
daughter has become an environmental refugee.At the age of 4, my daughter has become an environmental refugee.At the age of 4, my daughter has 
become an environmental refugee.At the age of 4, my daughter has become an environmental refugee.
At the age of 4, my daughter has become an environmental refugee.
</p>
<h1 style="background:#f60;color:#fff;">再试word-break:break-all.强制英文单词断行。看着挺好,回到最初的起点了。单词被截断的地方没有连字符“-”</h1>
<p style="width:300px;border:1px solid #ccc;text-align:justify;font:14px/20px '微软雅黑';word-break:break-all; ">
At the age of 4, my daughter has become an environmental refugee.At the age of 4, my daughter has become an environmental refugee.At the \age of 4, my daughter has become an environmental refugee.At the age of 4, my 
daughter has become an environmental refugee.At the age of 4, my daughter has become an environmental refugee.At the age of 4, my daughter has 
become an environmental refugee.At the age of 4, my daughter has become an environmental refugee.
At the age of 4, my daughter has become an environmental refugee.
</p>
<h1 style="background:#f60;color:#fff;">尝试用正则把&nbsp;换成空格。结果用的text()。蠢哭了</h1>
<p style="width:300px;border:1px solid #ccc;text-align:justify;font:14px/20px '微软雅黑';" id="a">
At the age of 4, my daughter has become an environmental refugee.At the age of 4, my daughter has become an environmental refugee.At the \age of 4, my daughter has become an environmental refugee.At the age of 4, my 
daughter has become an environmental refugee.At the age of 4, my daughter has become an environmental refugee.At the age of 4, my daughter has 
become an environmental refugee.At the age of 4, my daughter has become an environmental refugee.
At the age of 4, my daughter has become an environmental refugee.
</p>
<h1 style="background:#f60;color:#fff;">尝试用正则把&nbsp;换成空格。该用html()方法。机智如我</h1>
<p style="width:300px;border:1px solid #ccc;text-align:justify;font:14px/20px '微软雅黑';" id="b">
At the age of 4, my daughter has become an environmental refugee.At the age of 4, my daughter has become an environmental refugee.At the \age of 4, my daughter has become an environmental refugee.At the age of 4, my 
daughter has become an environmental refugee.At the age of 4, my daughter has become an environmental refugee.At the age of 4, my daughter has 
become an environmental refugee.At the age of 4, my daughter has become an environmental refugee.
At the age of 4, my daughter has become an environmental refugee.
</p>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
$("#a").text(function(e){
return $(this).text().replace(/ /ig," ")
});
$("#b").html(function(e){
return $(this).html().replace(/ /ig," ")
});
})
</script>
</body>
</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: