optimize long text formatter (#7973)

Co-authored-by: zhouwenxuan <aries@Mac.local>

frontend/src/metadata/components/cell-formatter/long-text/index.css

@@ -2,9 +2,12 @@
   width: 100%;
   max-width: 100%;
   height: 100%;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  line-clamp: 4;
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  line-height: 1.5;
 }
 
 /* links */

frontend/src/metadata/components/metadata-details/index.css

@@ -62,8 +62,7 @@
 
 .dirent-detail-item-value:not(.editable) .sf-metadata-long-text-formatter {
   line-height: 1.5;
-  height: 34px;
-  display: inline-block;
+  padding: 7px 6px 0;
 }
 
 .dirent-detail-item-value:not(.editable) .sf-metadata-rate-formatter {

frontend/src/metadata/views/kanban/boards/board/card/index.css

@@ -126,9 +126,13 @@
   max-height: 68px;
 }
 
+.sf-metadata-kanban-card .long-text-formatter,
 .sf-metadata-view-kanban-boards-text-wrap .sf-metadata-kanban-card-record .long-text-formatter {
-  display: block;
-  height: auto;
-  max-height: 68px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow: hidden;
+  line-height: 1.5;
   white-space: normal;
 }

frontend/src/metadata/views/table/table-main/records/record/cell/index.css

@@ -148,6 +148,7 @@
 
 .sf-metadata-result-table-cell .sf-metadata-long-text-formatter {
   width: 100%;
+  text-overflow: ellipsis;
 }
 
 .sf-metadata-result-table-cell .geolocation-formatter,