css 中 white-space 属性用来控制容器的文本中带有空白符、制表符、换行符等的显示

• 遇到\n的时候会自动换行

.cell {
    white-space: pre-line;
}

这是一个不需要换行的文字 这是一个 需要换行的文字

<template>
  <div class="line-container">
    <span class="line-one">{{ one }}</span>
    <span class="line-two">{{ two }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      one: "这是一个不需要换行的文字",
      two: "这是一个\n需要换行的文字",
    };
  },
};
</script>

<style>
.line-container {
  box-sizing: border-box;
  border: 1px solid #ddd;
  width: 400px;
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.line-one {
  width: 100%;
}
.line-two {
  width: 100%;
  white-space: pre-wrap; /* 允许文本换行 */
}
</style>

显示代码 复制代码 复制代码