feat: add word wrap

_site/assets/index.css

@@ -315,6 +315,7 @@ a {
     margin-block-start: 12px;
     margin-block-end: 0;
   }
+
   .article .article__toc ol ol {
     margin-block-start: 0;
   }

_site/heti.css

@@ -73,6 +73,9 @@
   font-weight: 400;
   -webkit-font-smoothing: subpixel-antialiased;
   line-height: 1.5;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  hyphens: auto;
 }
 
 .heti::before, .heti::after {

_site/index.html

@@ -145,7 +145,7 @@
         </section>
       </details>
 
-      <details>
+      <details open>
         <summary id="example-4">示例4：英文演示</summary>
         <section class="demo">
           <div lang="en-US">

lib/heti.scss

@@ -29,6 +29,12 @@
   -webkit-font-smoothing: subpixel-antialiased;
   line-height: $line-height-normal;
 
+  // 针对混合英文段落，采取按词折行，长单词通过连词符段行
+  // https://justmarkup.com/articles/2015-07-31-dealing-with-long-words-in-css/
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  hyphens: auto;
+
   // 自动在中西文间加 1/4 空格（暂无浏览器支持）
   //text-spacing: ideograph-alpha;
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "heti",
-  "version": "0.4.3",
+  "version": "0.5.0",
   "description": "赫蹏是专为中文内容展示设计的排版样式增强。它基于通行的中文排版规范而来，可以为网站的读者带来更好的文章阅读体验。",
   "main": "lib/heti.scss",
   "files": [