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

发布时间 2023-05-26 15:25:15作者: NicoleYe

最近在做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,就解决了这个问题。