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;
    }

 

相关推荐

  1. css之flex布局文本不显示省略号的解决方法

    2024-01-18 19:42:01       19 阅读
  2. css中文本不显示省略号和后显示省略号

    2024-01-18 19:42:01       18 阅读
  3. Python对csv格式文件保存与读取

    2024-01-18 19:42:01       13 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-01-18 19:42:01       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-01-18 19:42:01       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-01-18 19:42:01       19 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-01-18 19:42:01       20 阅读

热门阅读

  1. 什么叫卷积层?

    2024-01-18 19:42:01       37 阅读
  2. 我的创作纪念日

    2024-01-18 19:42:01       38 阅读
  3. 数据类型和局部/全局变量

    2024-01-18 19:42:01       29 阅读
  4. HTML中常用标签--详解

    2024-01-18 19:42:01       25 阅读
  5. C++笔记-effective stl

    2024-01-18 19:42:01       33 阅读
  6. python对access数据库的增删改查

    2024-01-18 19:42:01       33 阅读
  7. 使用流读取UNICODE-16的字符串

    2024-01-18 19:42:01       42 阅读