refs #6256 refactor line break

src/components/ui/CardSummary.vue

@@ -122,10 +122,7 @@ watch(props, async () => {
                 }
                 .value {
                     color: var(--vn-text);
-                    width: max-content;
                     overflow: hidden;
-                    white-space: nowrap;
-                    text-overflow: ellipsis;
                 }
             }
             .header {

src/components/ui/VnLv.vue

@@ -9,22 +9,12 @@ const $props = defineProps({
     titleValue: { type: [Number, String, Boolean], default: null },
     info: { type: String, default: null },
     dash: { type: Boolean, default: true },
-    textOverflow: { type: String, default: 'ellipsis' },
 });
 const isBooleanValue = computed(() => typeof $props.value === 'boolean');
-const textOverflowClass = computed(() => {
-    if ($props.textOverflow === 'ellipsis') return 'line-break-text';
-    return 'ellipsis-text';
-});
 </script>
 <style scoped>
-.ellipsis-text {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.line-break-text {
+.label,
+.value {
     white-space: pre-line;
     hyphens: auto;
     word-wrap: break-word;
@@ -34,11 +24,7 @@ const textOverflowClass = computed(() => {
     <div class="vn-label-value">
         <div v-if="$props.label || $slots.label" class="label">
             <slot name="label">
-                <span
-                    :title="$props.titleLabel ?? $props.label"
-                    :class="textOverflowClass"
-                    >{{ $props.label }}</span
-                >
+                <span :title="$props.titleLabel ?? $props.label">{{ $props.label }}</span>
             </slot>
         </div>
         <div class="value">
@@ -50,7 +36,7 @@ const textOverflowClass = computed(() => {
                 />
             </span>
             <slot v-else name="value">
-                <span :title="$props.value" :class="textOverflowClass">
+                <span :title="$props.value">
                     {{ $props.dash ? dashIfEmpty($props.value) : $props.value }}
                 </span>
             </slot>