当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>
相关文章推荐
- nginx secure_link下载防盗链
- zzulioj 1805: SC和ta的游泳池 (简单计算几何)
- gcc 编译器 , __builtin_expect() 研究
- 需要继续研究
- PHP编程效率的20个要点
- 单机虚拟化收效甚微
- Ubuntu 添加新分区 并设置挂载点
- Bootstrap中的段落和强调内容
- 数组中出现次数超过一半的数字
- 谷歌重返中国:已在华注册“壳公司”
- session和cookie原理
- 关于margin重合的几种解决办法
- java异常处理
- IT为什么需要虚拟化
- 【转载】MFCC特征提取(C语言版本)
- CentOS安装配置redis
- 书
- GCC -E -Wall等编译参数
- Linux中的中断处理
- STM32F103命名规则