vue实现文本自动换行

实现文本自动换行的基本方法

在Vue中实现文本自动换行，可以通过CSS的white-space和word-wrap属性控制。将以下样式应用于需要换行的元素：

.auto-wrap {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

在Vue模板中直接绑定类名：

<template>
  <div class="auto-wrap">{{ longText }}</div>
</template>

动态内容处理

当文本内容来自动态数据时，确保容器有明确的宽度限制。例如结合max-width使用：

.dynamic-wrap {
  max-width: 300px;
  white-space: pre-line;
}

Vue组件中可通过计算属性处理换行符：

export default {
  computed: {
    formattedText() {
      return this.rawText.replace(/\n/g, '<br>');
    }
  }
}

响应式布局适配

针对不同屏幕尺寸，使用CSS媒体查询调整换行行为：

.responsive-wrap {
  word-break: break-all;
}

@media (max-width: 768px) {
  .responsive-wrap {
    hyphens: auto;
  }
}

表格单元格换行

处理表格单元格内容时，需要额外设置table-layout：

.table-cell {
  table-layout: fixed;
  width: 100%;
}

.table-cell td {
  word-break: break-word;
}

富文本编辑器集成

使用v-html指令渲染带格式的文本时，需添加安全换行样式：

<div 
  v-html="richText" 
  style="white-space: pre-wrap;"
></div>

同时建议使用DOMPurify过滤XSS风险：

import DOMPurify from 'dompurify';

export default {
  methods: {
    sanitizeHtml(html) {
      return DOMPurify.sanitize(html);
    }
  }
}

特殊字符处理

对于连续数字或特殊字符的换行，需启用更严格的换行策略：

.special-wrap {
  word-break: break-all;
  hyphens: manual;
}

性能优化建议

大量文本渲染时，考虑使用虚拟滚动技术。例如配合vue-virtual-scroller：

import { RecycleScroller } from 'vue-virtual-scroller';

export default {
  components: {
    RecycleScroller
  }
}

模板示例：

<RecycleScroller
  class="scroller"
  :items="items"
  :item-size="32"
  key-field="id"
>
  <template v-slot="{ item }">
    <div class="auto-wrap">{{ item.text }}</div>
  </template>
</RecycleScroller>