{"id":560,"date":"2020-04-21T14:59:15","date_gmt":"2020-04-21T06:59:15","guid":{"rendered":"https:\/\/wp.winter-weng.cc\/work\/?p=560"},"modified":"2021-03-06T16:09:10","modified_gmt":"2021-03-06T08:09:10","slug":"css-word-break%e3%80%81overflow-wrapword-wrap-%e5%8f%8a-white-space-%e7%9a%84%e5%b7%ae%e5%88%a5%e8%88%87%e7%94%a8%e6%b3%95","status":"publish","type":"post","link":"https:\/\/wp.winter-weng.cc\/work\/?p=560","title":{"rendered":"[CSS] word-break\u3001overflow-wrap(word-wrap) \u53ca white-space \u7684\u5dee\u5225\u8207\u7528\u6cd5"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_75 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"\u986f\u793a\/\u96b1\u85cf\u5167\u5bb9\u76ee\u9304\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/wp.winter-weng.cc\/work\/?p=560\/#word-break\" >word-break<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/wp.winter-weng.cc\/work\/?p=560\/#overflow-wrap_word-wrap\" >overflow-wrap (word-wrap)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/wp.winter-weng.cc\/work\/?p=560\/#white-space\" >white-space<\/a><\/li><\/ul><\/nav><\/div>\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"word-break\"><\/span>word-break<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/word-break\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (\u5728\u65b0\u5206\u9801\u4e2d\u958b\u555f)\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/word-break<\/a><\/p>\n\n\n<p>\u6c7a\u5b9a\u55ae\u8a5e\u7684\u63db\u884c\u65b9\u5f0f\uff1a<\/p>\n\n\n<ul class=\"wp-block-list\"><li>normal\uff1a\u9810\u8a2d\u65b7\u884c\u65b9\u5f0f\uff0c\u82f1\u6587\u4ee5\u8a5e\u65b7\u884c\uff0cCJK (\u4e2d\u65e5\u97d3) \u4ee5\u5b57\u65b7\u884c\u3002<\/li><li>break-all\uff1a\u4efb\u610f\u5b57\u65b7\u884c\u3002<\/li><li>keep-all\uff1a\u4fdd\u7559\u55ae\u8a5e\uff0c\u4ee5\u8a5e\u65b7\u884c\uff0cCJK \u53e5\u5b50\u5c07\u4e0d\u6703\u65b7\u884c\uff0c\u9047\u5230\u7a7a\u683c\u3001\u6a19\u9ede\u7b26\u624d\u6703\u3002<\/li><li>break-word (\u4e0d\u5efa\u8b70\u4f7f\u7528)\uff1a\u6548\u679c\u8207 <code>word-break: normal<\/code> \u642d\u914d <code>overflow-wrap: anywhere<\/code> \u76f8\u540c\uff0c\u4e26\u4e14\u6703\u5ffd\u7565 <code>overflow-wrap<\/code> \u7684\u8a2d\u5b9a\u3002<\/li><\/ul>\n\n\n<hr class=\"wp-block-separator\" \/>\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"overflow-wrap_word-wrap\"><\/span>overflow-wrap (word-wrap)<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/overflow-wrap\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (\u5728\u65b0\u5206\u9801\u4e2d\u958b\u555f)\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/overflow-wrap<\/a><\/p>\n\n\n<p>\u539f\u672c <code>word-wrap<\/code> \u662f\u5fae\u8edf\u7684\u79c1\u6709\u5c6c\u6027\uff0c\u76ee\u524d\u6a19\u6e96\u5316\u7d71\u7a31\u70ba <code>overflow-wrap<\/code>\u3001<code>word-wrap<\/code> \u8996\u70ba\u4ee3\u7a31\u3002<\/p>\n\n\n<p>\u6b64\u5c6c\u6027\u6c7a\u5b9a\u65b7\u8a5e\u5f8c\u7684\u7d50\u679c overflow \u6642\u7684\u8655\u7406\u65b9\u5f0f\uff1a<\/p>\n\n\n<ul class=\"wp-block-list\"><li>normal\uff1a\u65b7\u884c\u5f8c overflow \u4e0d\u8655\u7406\u3002<\/li><li>break-word\uff1a\u65b7\u884c\u5f8c overflow\uff0c\u6703\u518d\u63db\u884c\uff1b\u8a08\u7b97\u6700\u5c0f\u9ad8\u5ea6\u6642\u4ee5\u55ae\u8a5e\u70ba\u55ae\u4f4d\u3002<\/li><li>anywhere\uff1a\u65b7\u884c\u5f8c overflow\uff0c\u6703\u518d\u63db\u884c\uff1b\u8a08\u7b97\u6700\u5c0f\u9ad8\u5ea6\u6642\u4ee5\u55ae\u5b57\u70ba\u55ae\u4f4d\u3002\u76ee\u524d\u700f\u89bd\u5668\u652f\u63f4\u5ea6\u6709\u9650\u3002<\/li><\/ul>\n\n\n<p>\u5ef6\u4f38\u95b1\u8b80\uff1a<a rel=\"noreferrer noopener\" aria-label=\"CSS overflow-wrap\u65b0\u5c5e\u6027\u503canywhere\u662f\u5e72\u561b\u7528\u7684\uff1f (\u5728\u65b0\u5206\u9801\u4e2d\u958b\u555f)\" href=\"https:\/\/www.zhangxinxu.com\/wordpress\/2020\/03\/css-overflow-wrap-anywhere\/\" target=\"_blank\">CSS overflow-wrap\u65b0\u5c5e\u6027\u503canywhere\u662f\u5e72\u561b\u7528\u7684\uff1f<\/a><\/p>\n\n\n<hr class=\"wp-block-separator\" \/>\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"white-space\"><\/span>white-space<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n<p><a rel=\"noreferrer noopener\" aria-label=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/white-space (\u5728\u65b0\u5206\u9801\u4e2d\u958b\u555f)\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/white-space\" target=\"_blank\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/white-space<\/a><\/p>\n\n\n<p>\u5982\u4f55\u8655\u7406\u5143\u7d20\u4e2d\u7684\u7a7a\u767d\u548c\u65b7\u884c\uff1a<\/p>\n\n\n<ul class=\"wp-block-list\"><li>normal\uff1a\u7701\u7565\u958b\u982d\u7684\u7a7a\u767d\uff0c\u82e5\u53e5\u4e2d\u6709\u9023\u7e8c\u7a7a\u683c\uff0c\u5c07\u5176\u8996\u70ba\u4e00\u500b\uff0coverflow \u6642\u81ea\u52d5\u63db\u884c\u3002<\/li><li>nowrap\uff1a\u9047\u5230 <code>&lt;br&gt;<\/code> \u624d\u63db\u884c\uff0c\u512a\u5148\u5e8f\u6bd4 <code>word-wrap<\/code> \u66f4\u9ad8\u3002<\/li><li>pre\uff1a\u4f9d\u539f\u7a7a\u767d\u5b57\u5143\u53ca\u6392\u7248\u986f\u793a\uff0coverflow \u4e0d\u63db\u884c\u3002<\/li><li>pre-wrap\uff1a\u4fdd\u7559\u539f\u6392\u7248\u53ca\u7a7a\u767d\u5b57\u5143\uff0c\u5728 overflow \u6642\u81ea\u52d5\u63db\u884c\u3002<\/li><li>pre-line \u4fdd\u7559\u539f\u6392\u7248\uff0c\u6703\u5408\u4f75\u591a\u9918\u7684\u7a7a\u767d\uff0coverflow \u81ea\u52d5\u63db\u884c\u3002<\/li><li>break-spaces\uff1a\u8207 <code>pre-wrap<\/code> \u884c\u70ba\u76f8\u4f3c\uff0c\u9664\u4e86\uff1a<ul><li>\u6703\u4fdd\u7559\u884c\u5c3e\u7a7a\u683c<\/li><li>\u7a7a\u683c\u6703\u5f71\u97ff min-content \u53ca max-content \u7684\u8a08\u7b97<\/li><\/ul><\/li><\/ul>\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/rukiawinter-wordpress.s3.ap-northeast-1.amazonaws.com\/wp-content\/uploads\/sites\/2\/2020\/04\/image.png\" alt=\"\" class=\"wp-image-564\" \/><figcaption><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/white-space\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (\u5728\u65b0\u5206\u9801\u4e2d\u958b\u555f)\">Credit: MDN<\/a><\/figcaption><\/figure>\n\n\n<p>\u5ef6\u4f38\u95b1\u8b80\uff1a<\/p>\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/blog.camel2243.com\/2016\/10\/02\/css-word-break%E3%80%81word-wrapoverflow-wrap-%E5%8F%8A-white-space-%E7%9A%84%E5%B7%AE%E5%88%A5%E8%88%87%E7%94%A8%E6%B3%95\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"[css] word-break\u3001word-wrap(overflow-wrap) \u53ca white-space \u7684\u5dee\u5225\u8207\u7528\u6cd5 (\u5728\u65b0\u5206\u9801\u4e2d\u958b\u555f)\">[css] word-break\u3001word-wrap(overflow-wrap) \u53ca white-space \u7684\u5dee\u5225\u8207\u7528\u6cd5<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>word-break https:\/\/develo&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"pgc_sgb_lightbox_settings":"","footnotes":""},"categories":[3],"tags":[35],"class_list":["post-560","post","type-post","status-publish","format-standard","hentry","category-css","tag-35"],"_links":{"self":[{"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/posts\/560","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=560"}],"version-history":[{"count":1,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/posts\/560\/revisions"}],"predecessor-version":[{"id":611,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/posts\/560\/revisions\/611"}],"wp:attachment":[{"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=560"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=560"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}