fix overflow for content card and block card

Author: LanThuyNguyen

packages/uui-card-block-type/lib/uui-card-block-type.element.ts

@@ -96,8 +96,8 @@ export class UUICardBlockTypeElement extends UUICardElement {
   #renderContent() {
     return html`
       <div id="content">
-        <span id="name">${this.name}</span>
-        <small>${this.description}<slot name="description"></slot></small>
+        <span title="${this.name}" id="name">${this.name}</span>
+        <small title="${this.description}">${this.description}<slot name="description"></slot></small>
       </div></div>
     `;
   }
@@ -176,6 +176,15 @@ export class UUICardBlockTypeElement extends UUICardElement {
       #open-part:hover #name {
         text-decoration: underline;
       }
+      #open-part #name,
+      #open-part small {
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        overflow-wrap: anywhere;
+      }
 
       :host([image]:not([image=''])) #open-part {
         transition: opacity 0.5s 0.5s;

packages/uui-card-content-node/lib/uui-card-content-node.element.ts

@@ -76,7 +76,9 @@ export class UUICardContentNodeElement extends UUICardElement {
               ? this._renderFallbackIcon()
               : ''}
           </span>
-          <div id="name">${this.name}<slot name="name"></slot></div>
+          <div title="${this.name}" id="name">
+            ${this.name}<slot name="name"></slot>
+          </div>
         </span>
         ${this.renderDetail()}
       </span>
@@ -173,6 +175,14 @@ export class UUICardContentNodeElement extends UUICardElement {
         padding: var(--uui-size-space-4) var(--uui-size-space-5);
       }
 
+      #open-part #name {
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
       #content {
         align-self: stretch;
         display: flex;