css保留格式文本换行

也可以用富文本保留文本格式  恰逢场景需要且能使代码简洁故用css实现

white-space:xxx;

white-space: pre-line;

连续的空白符会被合并。在遇到换行符或者<br>元素，或者需要为了填充「行框盒子(line boxes)」时会换行。

 white-space: pre;

连续的空白符会被保留。在遇到换行符或者<br>元素时才会换行。 

white-space: pre-wrap;

连续的空白符会被保留。在遇到换行符或者<br>元素，或者需要为了填充「行框盒子(line boxes)」时才会换行 

 

<div class="key fs_0">交付备注</div>
    <div class="val mw80" :class="{ 'line-1': !isShowPay, 'text-pre': isShowPay }">
         {{ state.info.remark || "-" }}
    </div>
    <div class="text-btn ml24 fr_c cp" @click="isShowPay = true" v-if="!isShowPay">
         展开<el-icon class="elIcon"><ArrowDown /></el-icon>
    </div>
    <div class="text-btn ml24 fr_c cp" @click="isShowPay = false" v-else>
         收起<el-icon class="elIcon"><ArrowUp /></el-icon>
    </div>
</div>

 

 .text-pre {
        white-space: pre-wrap;
    }