用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,就解决了这个问题。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本