Vue中如何实现长文本自动拆分为多行显示？

针对你遇到的长文本无法在一行完整显示的问题，提供以下几种实用方案：

方案一：CSS自动换行（推荐） #

通过CSS属性强制文本在容器边界处自动换行，无需修改文本内容：

<template>
  <span class="text-xs break-long-text">Make.Your.Case.With.These.8.Law.Firm.Interview.Questions.and.Answers</span>
</template>

<style scoped>
.text-xs.break-long-text {
  /* 任意字符位置均可换行，适合连续无空格的文本 */
  word-break: break-all;

  /* 可选：优先在单词边界换行，必要时才拆分单词 */
  /* overflow-wrap: break-word; */
}
</style>

• word-break: break-all：会在任意字符（包括点号）后换行，确保文本不会溢出容器；
• overflow-wrap: break-word：优先在自然的单词分隔处换行，若文本无空格（如你的点连格式），同样会强制拆分换行。

方案二：指定点号位置换行 #

如果希望仅在点号处换行，可通过JavaScript替换文本，配合CSS实现精准换行：

<template>
  <span class="text-xs">{{ formattedText }}</span>
</template>

<script setup>
const originalText = "Make.Your.Case.With.These.8.Law.Firm.Interview.Questions.and.Answers";
// 把每个点号替换为"点号+换行"
const formattedText = originalText.replace(/\./g, ".<br>");
</script>

<style scoped>
.text-xs {
  white-space: pre-line; /* 识别<br>标签或换行符并换行 */
}
</style>

这种方式会让文本在每个点号后自动换行，完全匹配你文本的结构特点。

内容的提问来源于stack exchange，提问作者user824624