fix: recommendation can write html data

Author: dajiangjunok

src/components/volunteer/VolunteerProfile.module.css

@@ -69,6 +69,23 @@
 }
 
 .recommendation p {
+  font-size: 14px;
+  line-height: 1.7;
+  color: #374151;
+  margin: 0;
+  text-align: left;
+  text-indent: 2em;
+  word-wrap: break-word;
+  hyphens: auto;
+  display: -webkit-box;
+  -webkit-line-clamp: 7;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-height: calc(1.7em * 7);
+}
+
+.recommendationContent div {
   font-size: 14px;
   line-height: 1.7;
   color: #374151;
@@ -126,6 +143,21 @@
     font-size: 13px;
     line-height: 1.6;
     margin: 0;
+    text-indent: 2em;
+    display: -webkit-box;
+    -webkit-line-clamp: 8;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-height: calc(1.6em * 8);
+  }
+  
+  .recommendationContent div {
+    font-size: 13px;
+    line-height: 1.6;
+    margin: 0;
+    word-wrap: break-word;
+    hyphens: auto;
     display: -webkit-box;
     -webkit-line-clamp: 8;
     -webkit-box-orient: vertical;
@@ -222,6 +254,7 @@
   color: #374151;
   margin: 0;
   text-align: left;
+  text-indent: 2em;
   font-style: italic;
   word-wrap: break-word;
   hyphens: auto;

src/components/volunteer/VolunteerProfile.tsx

@@ -44,7 +44,7 @@ export default function VolunteerProfile({
 
             <div className={styles.recommendation}>
               <div className={styles.recommendationContent}>
-                <p>{recommendation}</p>
+                <div dangerouslySetInnerHTML={{ __html: recommendation }} />
               </div>
             </div>
           </div>
@@ -83,7 +83,7 @@ export default function VolunteerProfile({
               <span className={styles.modalRecommendationTitle}>推荐语</span>
             </div>
             <div className={styles.modalRecommendationContent}>
-              <p>{recommendation}</p>
+              <div dangerouslySetInnerHTML={{ __html: recommendation }} />
             </div>
           </div>
         </div>

src/pages/community/cooperation/index.tsx

@@ -45,7 +45,9 @@ const cooperationStars2021 = [
     name: '何莹',
     nickname: '',
     avatar: '/img/cblecker.png',
-    recommendation: '何(小)莹身为开源社社区合作组副组长，几年以来持续地投入社区合作，今年完美地组织以及主持了 “暑期2021之大咖说开源“，之后紧张地准备出国留学的同时，还积极地与开源社社区合作组小伙伴们推动 COSCon21 社区合作事宜，让 COSCon21的合作社区达到了创记录的 75 家以上，出国当天和到达留学地之后，仍不间断地联系社区合作伙伴们，坚持不懈的精神令人感动。我们亲昵地叫她 “流浪的开源小可爱“，因为她就是当仁不让的 “社区合作之星”。初次见面是何莹来给年会开源硬件论坛做翻译志愿者，之后便常常在开源社的各个社群都能看到她活跃的身影，为开源社的社区活跃和合作做了大量的贡献，她的热情的态度和细腻的笔触令开源社区增添了柔性的温度。初次见面是何莹来给年会开源硬件论坛做翻译志愿者，之后便常常在开源社的各个社群都能看到她活跃的身影，为开源社的社区活跃和合作做了大量的贡献，她的热情的态度和细腻的笔触令开源社区增添了柔性的温度。'
+    recommendation: `<p>何(小)莹身为开源社社区合作组副组长，几年以来持续地投入社区合作，今年完美地组织以及主持了 “暑期2021之大咖说开源“，之后紧张地准备出国留学的同时，还积极地与开源社社区合作组小伙伴们推动 COSCon21 社区合作事宜，让 COSCon21的合作社区达到了创记录的 75 家以上，出国当天和到达留学地之后，仍不间断地联系社区合作伙伴们，坚持不懈的精神令人感动。我们亲昵地叫她 “流浪的开源小可爱“，因为她就是当仁不让的 “社区合作之星”。</p>
+    <p>初次见面是何莹来给年会开源硬件论坛做翻译志愿者，之后便常常在开源社的各个社群都能看到她活跃的身影，为开源社的社区活跃和合作做了大量的贡献，她的热情的态度和细腻的笔触令开源社区增添了柔性的温度。初次见面是何莹来给年会开源硬件论坛做翻译志愿者，之后便常常在开源社的各个社群都能看到她活跃的身影，为开源社的社区活跃和合作做了大量的贡献，她的热情的态度和细腻的笔触令开源社区增添了柔性的温度。</p>
+    `
   },
   {
     name: '范晶晶',