用fetch处理的流,放到div中会有样式丢失的问题

最近在做fetch处理流的问题,发现接收到得流,在div中渲染得时候样式会丢失,特别是空格、换行之类得。为了解决问题去看看了css得样式处理发现css中有个属性white-space。

然后就去看了这个属性的定义和取值情况。

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

  • normal:默认,忽略文本中所有的空白、换行符;只有文本存在 <br> 或文本达到框的约束时,文本才会换行
  • nowrap:和normal类似,忽略文本中所有的空白、换行符;遇到框的宽度约束时不会自动换行,文本只有在有 br 时才会换行
  • pre:保留文本中的空白、换行符;遇到框的宽度约束时不会自动换行,文本存在 <br> 或文本中有换行符时,文本才会换行
  • pre-wrap:和pre类似,保留文本中的空白、换行符;文本存在 <br> 或文本中有换行符时,或者遇到框的宽度约束时,文本都才会换行
  • pre-line:会略文本中的空白符;文本存在 <br> 或文本中有换行符时,或者遇到框的宽度约束时,文本都才会换行

 

    一开div中的 white-space:normal,默认值,所以文字流的样式都没有了。将div中的 white-space:pre-wrap,就解决了这个问题。

posted @   NicoleYe  阅读(31)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
点击右上角即可分享
微信分享提示