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>