From 47d85d752f1312c78596e1f225bc7fc2ab4e29a6 Mon Sep 17 00:00:00 2001
From: Sivan <sun.sivan@gmail.com>
Date: Sun, 15 Mar 2020 19:43:18 +0800
Subject: [PATCH] feat: add word wrap

---
 _site/assets/index.css | 1 +
 _site/heti.css         | 3 +++
 _site/index.html       | 2 +-
 lib/heti.scss          | 6 ++++++
 package.json           | 2 +-
 5 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/_site/assets/index.css b/_site/assets/index.css
index 9338638..0d20a30 100644
--- a/_site/assets/index.css
+++ b/_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;
   }
diff --git a/_site/heti.css b/_site/heti.css
index 7a6d9cc..bc7c320 100644
--- a/_site/heti.css
+++ b/_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 {
diff --git a/_site/index.html b/_site/index.html
index ca438ea..959945f 100644
--- a/_site/index.html
+++ b/_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">
diff --git a/lib/heti.scss b/lib/heti.scss
index af68818..2d86c7e 100644
--- a/lib/heti.scss
+++ b/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;
 
diff --git a/package.json b/package.json
index 064bf93..9a0e0db 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "heti",
-  "version": "0.4.3",
+  "version": "0.5.0",
   "description": "赫蹏是专为中文内容展示设计的排版样式增强。它基于通行的中文排版规范而来，可以为网站的读者带来更好的文章阅读体验。",
   "main": "lib/heti.scss",
   "files": [