{"id":459,"date":"2015-05-11T14:16:39","date_gmt":"2015-05-11T06:16:39","guid":{"rendered":"http:\/\/www.code-life.com\/?p=459"},"modified":"2018-12-06T11:59:41","modified_gmt":"2018-12-06T03:59:41","slug":"%e8%bd%ac%e4%bd%a0%e7%9c%9f%e7%9a%84%e4%ba%86%e8%a7%a3word-wrap%e5%92%8cword-break%e7%9a%84%e5%8c%ba%e5%88%ab%e5%90%97%ef%bc%9f","status":"publish","type":"post","link":"https:\/\/www.code-life.com\/?p=459","title":{"rendered":"[\u8f6c]\u4f60\u771f\u7684\u4e86\u89e3word-wrap\u548cword-break\u7684\u533a\u522b\u5417\uff1f"},"content":{"rendered":"<p>\u8f6c\u81ea\u65e0\u53cc\u535a\u5ba2<a href=\"http:\/\/www.cnblogs.com\/2050\/archive\/2012\/08\/10\/2632256.html\" target=\"_blank\">http:\/\/www.cnblogs.com\/2050\/archive\/2012\/08\/10\/2632256.html<\/a><\/p>\n<p>\u8fd9\u4e24\u4e2a\u4e1c\u897f\u662f\u4ec0\u4e48\uff0c\u6211\u76f8\u4fe1\u81f3\u4eca\u8fd8\u6709\u5f88\u591a\u4eba\u641e\u4e0d\u6e05\uff0c\u53ea\u4f1a\u6b7b\u8bb0\u786c\u80cc\u7684\u5199\u4e00\u4e2aword-wrap:break-word;word-break:break-all;\u8fd9\u6837\u7684\u4e1c\u897f\u6765\u5f3a\u5236\u65ad\u53e5\uff0c\u53c8\u6216\u8005\u662f\u56e0\u4e3a\u8fd9\u4e24\u4e2a\u4e1c\u897f\u5b9e\u5728\u662f\u592a\u62d7\u53e3\u4e86\uff0c\u957f\u5f97\u53c8\u5dee\u4e0d\u591a\uff0c\u5bfc\u81f4\u8fde\u80cc\u90fd\u5f88\u96be\u80cc\u4e0b\u6765\u3002<\/p>\n<p>\u90a3\u5b83\u4eec\u5230\u5e95\u662f\u4ec0\u4e48\u5462\uff1f\u6211\u5728Mozilla\u7684\u5b98\u7f51\u4e0a\u627e\u5230\u5982\u4e0b\u7684\u89e3\u91ca\uff1a<\/p>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/CSS\/word-wrap\" target=\"_blank\">word-wrap<\/a>:<br \/>\n<img src=\"\/wp-content\/uploads\/2015\/05\/1.jpg\" alt=\"\" \/><br \/>\n<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/CSS\/word-break\" target=\"_blank\">word-break<\/a>:<br \/>\n<img src=\"\/wp-content\/uploads\/2015\/05\/2.jpg\" alt=\"\" \/><\/p>\n<p>\u6211\u4eec\u770b\u5230\u4e24\u4e2a\u89e3\u91ca\u4e2d\u90fd\u51fa\u73b0\u4e86 break lines within words \u8fd9\u6837\u7684\u8bcd\u6c47\uff0c\u8bf4\u660e\u5b83\u4eec\u90fd\u8ddf\u5355\u8bcd\u5185\u65ad\u53e5\u53c8\u5173\u3002\u7136\u540e\u6211\u4eec\u8bd5\u7740\u7ffb\u8bd1\u4e00\u4e0b\u4e0a\u9762\u7684\u4e24\u6bb5\u82f1\u6587\uff1a<\/p>\n<p>word-wrap:<br \/>\nCSS\u7684 word-wrap \u5c5e\u6027\u7528\u6765\u6807\u660e\u662f\u5426\u5141\u8bb8\u6d4f\u89c8\u5668\u5728\u5355\u8bcd\u5185\u8fdb\u884c\u65ad\u53e5\uff0c\u8fd9\u662f\u4e3a\u4e86\u9632\u6b62\u5f53\u4e00\u4e2a\u5b57\u7b26\u4e32\u592a\u957f\u800c\u627e\u4e0d\u5230\u5b83\u7684\u81ea\u7136\u65ad\u53e5\u70b9\u65f6\u4ea7\u751f\u6ea2\u51fa\u73b0\u8c61\u3002<br \/>\nword-break:<br \/>\nCSS\u7684 word-break \u5c5e\u6027\u7528\u6765\u6807\u660e\u600e\u4e48\u6837\u8fdb\u884c\u5355\u8bcd\u5185\u7684\u65ad\u53e5\u3002<\/p>\n<p>\u8c8c\u4f3c\u4ece\u4e0a\u9762\u4e24\u4e2a\u8bfb\u7740\u90fd\u86cb\u75bc\u7684\u7ffb\u8bd1\u4e2d\u627e\u5230\u4e86\u4e00\u4e9b\u533a\u522b\uff1aword-wrap \u5f3a\u8c03\u7684\u662f\u662f\u5426\u5141\u8bb8\u5355\u8bcd\u5185\u65ad\u53e5\uff0c\u800cword-break\u5f3a\u8c03\u7684\u5219\u662f\u600e\u4e48\u6837\u6765\u8fdb\u884c\u5355\u8bcd\u5185\u7684\u65ad\u53e5\u3002<\/p>\n<p>\u8bf4\u5230\u8fd9\u91cc\uff0c\u597d\u50cf\u4f9d\u7136\u4e0d\u662f\u5f88\u660e\u6717\uff0c\u597d\u5427\uff0c\u8868\u8fbe\u80fd\u529b\u5dee\u7684\u5b69\u7eb8\u771f\u662f\u4f24\u4e0d\u8d77\u554a\uff0c\u53ea\u80fd\u7528\u4e9b\u5b9e\u4f8b\u6765\u8865\u6551\u4e86\u3002<\/p>\n<p>\u9996\u5148\uff0c\u4f55\u8c13\u5355\u8bcd\u5185\u65ad\u53e5\uff1f\u5f53\u7136\u8fd9\u91cc\u6307\u7684\u90fd\u662f\u897f\u6587\u5355\u8bcd\u3002<\/p>\n<p><img src=\"\/wp-content\/uploads\/2015\/05\/3.png\" alt=\"\" \/><br \/>\n\u8fd9\u662f\u6ca1\u6709\u5355\u8bcd\u5185\u65ad\u53e5\u7684\u60c5\u51b5\uff0c\u6211\u4eec\u770b\u5230\u90a3\u4e2a\u5355\u8bcd\u662f\u5728\u662f\u592a\u957f\u4e86\uff0c\u6240\u4ee5\u5b83\u6ea2\u51fa\u4e86\u5305\u88f9\u5b83\u7684\u5bb9\u5668\u3002<\/p>\n<p><img src=\"\/wp-content\/uploads\/2015\/05\/4.png\" alt=\"\" \/><br \/>\n\u8fd9\u662f\u8fdb\u884c\u4e86\u5355\u8bcd\u5185\u65ad\u53e5\u7684\u60c5\u51b5\uff0c\u5c31\u662f\u4e00\u4e2a\u5355\u8bcd\u88ab\u65ad\u4f5c\u4e86\u4e24\u884c\u3002<\/p>\n<p>\u5148\u8981\u660e\u786e\u4e00\u70b9\uff0c\u4e0d\u52a0word-wrap\u6216word-break\u7684\u65f6\u5019\uff0c\u5c31\u662f\u6d4f\u89c8\u5668\u9ed8\u8ba4\u7684\u65f6\u5019\uff0c\u5982\u679c\u6709\u4e00\u4e2a\u5355\u8bcd\u5f88\u957f\uff0c\u5bfc\u81f4\u4e00\u884c\u4e2d\u5269\u4e0b\u7684\u7a7a\u95f4\u5df2\u7ecf\u653e\u4e0d\u4e0b\u5b83\u65f6\uff0c\u5219\u6d4f\u89c8\u5668\u4f1a\u628a\u8fd9\u4e2a\u5355\u8bcd\u632a\u5230\u4e0b\u4e00\u884c\u53bb\uff1a<br \/>\n<img src=\"\/wp-content\/uploads\/2015\/05\/5.png\" alt=\"\" \/><br \/>\nword..d \u8fd9\u4e2a\u6211\u4eec\u521b\u9020\u51fa\u6765\u7684\u5355\u8bcd\u672c\u6765\u5e94\u8be5\u7d27\u63a5\u5728 long \u540e\u9762\u7684\uff0c\u4f46\u662flong\u540e\u5269\u4e0b\u7684\u7a7a\u95f4\u5df2\u7ecf\u4e0d\u591f\u4e86\uff0c\u800c\u5355\u8bcd\u9ed8\u8ba4\u662f\u4e0d\u80fd\u65ad\u5f00\u7684\uff0c\u6240\u4ee5\u6d4f\u89c8\u5668\u5c31\u53ea\u597d\u628a\u5b83\u5c48\u5c0a\u4e0b\u79fb\u4e86\u3002<\/p>\n<p>\u8fd9\u4e2a\u957f\u5355\u8bcd\u8fd8\u4e0d\u7b97\u53d8\u6001\u7684\uff0c\u56e0\u4e3a\u81f3\u5c11\u5b83\u6ca1\u6709\u957f\u5230\u8d85\u8fc7\u5305\u88f9\u5b83\u7684\u5143\u7d20\u7684\u957f\u5ea6\uff0c\u4f46\u662f\u5982\u679c\u8d85\u8fc7\u4e86\u5462\uff1f<br \/>\n<img src=\"\/wp-content\/uploads\/2015\/05\/6.png\" alt=\"\" \/><br \/>\n\u5982\u679c\u8d85\u8fc7\u4e86\u5c31\u50cf\u524d\u9762\u6211\u4eec\u63d0\u5230\u8fc7\u7684\uff0c\u5b83\u4f1a\u6ea2\u51fa\u5b83\u7684\u7236\u5bb9\u5668\u5916\uff0c\u56e0\u4e3a\u8fd9\u65f6\u5b83\u662f\u4e0d\u5141\u8bb8\u88ab\u622a\u65ad\u7684\uff0c\u90a3\u5c31\u53ea\u80fd\u51b2\u51fa\u53bb\u54af\u3002<\/p>\n<p>\u8fd9\u4e2a\u65f6\u5019word-wrap\u5c31\u80fd\u6d3e\u4e0a\u7528\u573a\u4e86\u3002\u6211\u4eec\u7ed9\u8fd9\u6bb5\u6587\u5b57\u52a0\u4e0aword-wrap:break-word\u770b\u770b\u4f1a\u600e\u4e48\u6837\uff1a<br \/>\n<img src=\"\/wp-content\/uploads\/2015\/05\/7.png\" alt=\"\" \/><br \/>\n<img src=\"\/wp-content\/uploads\/2015\/05\/8.png\" alt=\"\" \/><\/p>\n<p>\u54c8\u54c8\uff0c\u4f60\u7ed9\u6211\u6eda\u56de\u53bb\u5427\uff0c\u53d8\u6001\u7684\u957f\u5355\u8bcd\uff0c\u5373\u4f7f\u4f60\u65ad\u4e86\u4e5f\u65e0\u6240\u8c13\u3002<br \/>\n\u8fd9\u6837\uff0c\u4e3a\u4e86\u9632\u6b62\u957f\u5355\u8bcd\u6ea2\u51fa\uff0c\u5c31\u5728\u5b83\u7684\u5185\u90e8\u65ad\u53e5\u4e86\u3002\u8fd9\u5c31\u662f word-wrap:break-word \u7684\u529f\u80fd\u3002<\/p>\n<p>\u518d\u770b\u770bword-wrap\u7684\u6d4f\u89c8\u5668\u652f\u6301\u60c5\u51b5\uff1a<br \/>\n<img src=\"\/wp-content\/uploads\/2015\/05\/9.png\" alt=\"\" \/><br \/>\n\u5f88\u597d\uff0c\u51e0\u4e4e\u6240\u6709\u6d4f\u89c8\u5668\u90fd\u652f\u6301\u3002<\/p>\n<p>\u597d\u5427\uff0c\u4f60\u73b0\u5728\u53ef\u4ee5\u8bf4\u4e86\uff0c\u90fd\u6709\u4e86word-wrap\u8fd9\u4e2a\u4e1c\u897f\uff0c\u90a3\u8fd8\u8981word-break\u6765\u5e72\u4ec0\u4e48\u9e1f\uff1f<br \/>\n\u4e07\u6076\u7684\u8d44\u672c\u5bb6\u603b\u662f\u60f3\u8981\u69a8\u5e72\u52b3\u52a8\u8005\u7684\u4e00\u5207\uff0c\u4f60\u770b\uff0c\u4e0b\u56fe\u4e2d\u7684long\u540e\u9762\u4e0d\u662f\u8fd8\u6709\u4e00\u6bb5\u7a7a\u95f4\u5417\uff0c\u96be\u9053\u5c31\u8fd9\u6837\u653e\u7740\uff1f\u592a\u6d6a\u8d39\u4e86\u2026<br \/>\n<img src=\"\/wp-content\/uploads\/2015\/05\/10.png\" alt=\"\" \/><br \/>\n\u662f\u554a\uff0clong\u540e\u9762\u90a3\u91cc\u8db3\u53ef\u4ee5\u653e\u597d\u51e0\u4e2a\u77ed\u7684\u5355\u8bcd\u4e86\uff0c\u90fd\u662f\u90a3\u4e2a\u81ed\u53d8\u6001\u7684\u957f\u5355\u8bcd\uff01<\/p>\n<p>\u6240\u4ee5IE\u771f\u7684\u5f88\u4f53\u8d34\uff0c\u4e0d\u8981\u518d\u9a82\u5b83\u5566\uff0c\u8003\u8651\u5230\u4e0d\u6d6a\u8d39\u4e00\u70b9\u70b9\u7a7a\u95f4\u7684\u95ee\u9898\uff0c\u5b83\u521b\u9020\u51fa\u4e86word-break\u8fd9\u4e2a\u4e1c\u897f\u3002\u73b0\u5728\u6211\u4eec\u6765\u770b\u770b\u4f7f\u7528word-break:break-all;\u540e\u4f1a\u600e\u4e48\u6837\u3002<br \/>\n<img src=\"\/wp-content\/uploads\/2015\/05\/11.png\" alt=\"\" \/><br \/>\n<img src=\"\/wp-content\/uploads\/2015\/05\/12.png\" alt=\"\" \/><br \/>\n\u770b\u770b\u53d1\u751f\u4ec0\u4e48\u4e86\uff1f\u90a3\u4e2a\u53d8\u6001\u7684\u957f\u5355\u8bcd\u5e76\u6ca1\u6709\u88ab\u632a\u5230\u4e0b\u4e00\u884c\uff0c\u800c\u662f\u76f4\u63a5\u653e\u5728\u4e86long\u540e\u9762\uff0c\u7136\u540e\u5728\u7236\u5bb9\u5668\u7684\u53f3\u8fb9\u754c\u65ad\u5f00\u4e86\u3002\u6240\u4ee5\uff0c\u5b83\u6ca1\u6709\u6d6a\u8d39\u7a7a\u95f4\u4e86\u54e6\u3002<\/p>\n<p>\u518d\u770b\u4e0bword-break:break-all\u7684\u6d4f\u89c8\u5668\u652f\u6301\u60c5\u51b5\uff1a<br \/>\n<img src=\"\/wp-content\/uploads\/2015\/05\/13.png\" alt=\"\" \/><br \/>\n\u9664\u4e86Opera\u5916\uff0c\u5176\u4ed6\u90fd\u652f\u6301\u8036\uff08\u706b\u72d0\u4e5f\u4ece\u4e0d\u652f\u6301\u6539\u4e3a\u652f\u6301\u4e86\uff09\uff01<\/p>\n<p>\u6700\u5f00\u59cb\u6211\u4eec\u8bf4\u4e86\uff0cword-wrap\u662f\u7528\u6765\u51b3\u5b9a\u5141\u4e0d\u5141\u8bb8\u5355\u8bcd\u5185\u65ad\u53e5\u7684\uff0c\u5982\u679c\u4e0d\u5141\u8bb8\u7684\u8bdd\u957f\u5355\u8bcd\u5c31\u4f1a\u6ea2\u51fa\u3002\u6700\u91cd\u8981\u7684\u4e00\u70b9\u662f\u5b83\u8fd8\u662f\u4f1a\u9996\u5148\u5c1d\u8bd5\u632a\u5230\u4e0b\u4e00\u884c\uff0c\u770b\u770b\u4e0b\u4e00\u884c\u7684\u5bbd\u5ea6\u591f\u4e0d\u591f\uff0c\u4e0d\u591f\u7684\u8bdd\u5c31\u8fdb\u884c\u5355\u8bcd\u5185\u7684\u65ad\u53e5\u3002<\/p>\n<p>\u800cword-break:break-all;\u5219\u66f4\u53d8\u6001\uff0c\u56e0\u4e3a\u5b83\u65ad\u53e5\u7684\u65b9\u5f0f\u975e\u5e38\u7c97\u66b4\uff0c\u5b83\u4e0d\u4f1a\u5c1d\u8bd5\u628a\u957f\u5355\u8bcd\u632a\u5230\u4e0b\u4e00\u884c\uff0c\u800c\u662f\u76f4\u63a5\u8fdb\u884c\u5355\u8bcd\u5185\u7684\u65ad\u53e5\u3002\u8fd9\u4e5f\u53ef\u4ee5\u89e3\u91ca\u4e3a\u4ec0\u4e48\u8bf4\u5b83\u7684\u4f5c\u7528\u662f\u51b3\u5b9a\u7528\u4ec0\u4e48\u65b9\u5f0f\u6765\u65ad\u53e5\u7684\uff0c\u90a3\u5c31\u662f\u2014\u2014\u7528\u4e86word-break:break-all;\uff0c\u5c31\u7b49\u4e8e\u4f7f\u7528\u7c97\u66b4\u65b9\u5f0f\u6765\u65ad\u53e5\u4e86\u3002\u603b\u4e4b\u4e00\u53e5\u8bdd\uff0c\u5982\u679c\u60a8\u60f3\u66f4\u8282\u7701\u7a7a\u95f4\uff0c\u90a3\u5c31\u7528word-break:break-all;\u5c31\u5bf9\u4e86\uff01<\/p>\n<p>\u4f46\u65e0\u8bba\u5982\u4f55\uff0c\u5355\u8bcd\u5185\u7684\u65ad\u53e5\u90fd\u4f1a\u5bf9\u897f\u6587\u7684\u53ef\u8bfb\u6027\u4ea7\u751f\u4e00\u5b9a\u7684\u5f71\u54cd\uff0c\u6709\u65f6\u5019\u8fd9\u70b9\u5c31\u8981\u6ce8\u610f\u4e86\u3002<\/p>\n<p>PS:\u7f51\u4e0a\u6709\u4e9b\u6587\u7ae0\u8bf4\uff0cword-wrap:break-word;\u5bf9\u957f\u4e32\u82f1\u6587\u4e0d\u8d77\u4f5c\u7528\uff0c\u5176\u5b9e\u8fd9\u662f\u975e\u5e38\u9519\u8bef\u7684\uff0cword-wrap:break-word;\u7167\u6837\u80fd\u628a\u4e00\u4e2a\u957f\u4e32\u82f1\u6587\u6216\u6570\u5b57\u62c6\u6210\u591a\u884c\u3002\u4e8b\u5b9e\u4e0a\uff0cword-wrap:break-word;\u4e0eword-break:break-all;\u5171\u540c\u70b9\u662f\u90fd\u80fd\u628a\u957f\u5355\u8bcd\u5f3a\u884c\u65ad\u53e5\uff0c\u4e0d\u540c\u70b9\u662fword-wrap:break-word;\u4f1a\u9996\u5148\u8d77\u4e00\u4e2a\u65b0\u884c\u6765\u653e\u7f6e\u957f\u5355\u8bcd\uff0c\u65b0\u7684\u884c\u8fd8\u662f\u653e\u4e0d\u4e0b\u8fd9\u4e2a\u957f\u5355\u8bcd\u5219\u4f1a\u5bf9\u957f\u5355\u8bcd\u8fdb\u884c\u5f3a\u5236\u65ad\u53e5\uff1b\u800cword-break:break-all;\u5219\u4e0d\u4f1a\u628a\u957f\u5355\u8bcd\u653e\u5728\u4e00\u4e2a\u65b0\u884c\u91cc\uff0c\u5f53\u8fd9\u4e00\u884c\u653e\u4e0d\u4e0b\u7684\u65f6\u5019\u5c31\u76f4\u63a5\u5f3a\u5236\u65ad\u53e5\u4e86\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u8f6c\u81ea\u65e0\u53cc\u535a\u5ba2http:\/\/www.cnblogs.com\/2050\/archiv &hellip; <a href=\"https:\/\/www.code-life.com\/?p=459\">\u7ee7\u7eed\u9605\u8bfb <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[8],"tags":[45,42],"_links":{"self":[{"href":"https:\/\/www.code-life.com\/index.php?rest_route=\/wp\/v2\/posts\/459"}],"collection":[{"href":"https:\/\/www.code-life.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.code-life.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.code-life.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.code-life.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=459"}],"version-history":[{"count":5,"href":"https:\/\/www.code-life.com\/index.php?rest_route=\/wp\/v2\/posts\/459\/revisions"}],"predecessor-version":[{"id":493,"href":"https:\/\/www.code-life.com\/index.php?rest_route=\/wp\/v2\/posts\/459\/revisions\/493"}],"wp:attachment":[{"href":"https:\/\/www.code-life.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=459"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.code-life.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=459"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.code-life.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=459"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}