split by words

src/app/list/list.component.html

@@ -65,7 +65,7 @@
         <div class="person-info">
           <div class="image">
             <div class="image-wrapper">
-              <img src="{{ person.image.small }}" alt="{{ person.image.alt }}" title="{{ person.image.title }}">
+              <img src="{{ person.images[0].medium }}">
             </div>
           </div>
           <div class="detail">

src/app/list/list.component.ts

@@ -69,7 +69,12 @@ export class ListComponent implements OnInit {
 
   public getPersonDetail(person: IPerson): string {
     const str = person.intro.replace(/<.*?>/g, '');
-    return (person.intro.length > 284) ? (str.substring(0, 284)) + '....' : (person.intro);
+    let words = str.split(' ');
+    if (words.length >= 38) {
+      words = words.slice(0, 37);
+      words[words.length - 1] += '...';
+    }
+    return words.join(' ');
   }
 
   private getList(): void {

src/app/person.ts

@@ -6,7 +6,7 @@ export interface IPerson {
   personal_code: number;
   dob: string;
   phone: string;
-  image: string[];
+  images: any;
   intro: string;
 }