首页 > 其他分享 >用fetch处理的流,放到div中会有样式丢失的问题

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

时间:2023-05-26 17:24:17浏览次数:42  
标签:pre 文本 space 换行 div 换行符 fetch 中会

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

标签:pre,文本,space,换行,div,换行符,fetch,中会
From: https://www.cnblogs.com/NicoleYe/p/17410194.html

相关文章

  • 文字超过div容器的高度显示...
    我们一般遇到的场景为超过一行或者2行,3行等等显示...,但是对于div容器如果想实现超过div容器的高度才显示...,这该怎么实现呢我们知道,当div只有内部只有一个文字时此时空间足够,2个也是...那么第n个呢,所以思路来了,我们可以一直计算下去,知道超过容器高度为止代码如下:<html><bod......
  • CodeForces 1107A Digits Sequence Dividing(思维)
    传送门唉,题目讲的天花乱坠的,花里胡哨,一上来真是把我唬住了。愣了半天也没看出来到底咋做,后来借助翻译明白了这个题就是让你把一串字符分成两串,然后第一串要比第二串小,就这样,然后又是个SpecialJudge。做的时候就把第一个数作为第一个串,然后串长如果为2,就判断一下后面的串要比第一个......
  • CodeForces 1108B Divisors of Two Integers(思维)
    传送门题目大意就是给你由X,Y两个数的所有因子(包括一和数本身)组成的序列,然后通过这个序列找出这两个数。由此可见,序列里最大的数一定是X或Y其中的一个,然后我们的任务就是找另一个了,我找的是剩下的因子里不能被已找到的那个数整除的数中最大的数,且没有和这个数相同的数。#include<std......
  • Educational Codeforces Round 63 (Rated for Div. 2) A,B,C
    A.ReverseaSubstring传送门就是找不满足升序排列的字母,输出就行了。#include<bits/stdc++.h>#definelllonglongusingnamespacestd;constintmaxn=3e5+10;chars[maxn];intmain(){#ifndefONLINE_JUDGEfreopen("in","r",stdin);#endif//ONL......
  • Codeforces Round #553 (Div. 2) A,B,C,D
    A:MaximandBiology传送门因为数据范围比较小,就暴力就完事儿了。#include<bits/stdc++.h>usingnamespacestd;constintINF=0x3f3f3f3f;intconvert(chara,charb){if(a==b)return0;if(a>b)swap(a,b);intx=b-a;a=......
  • Codeforces Round #552 (Div. 3) 1154
    A:传送门就是解个方程,也没什么说的#include<bits/stdc++.h>usingnamespacestd;intmain(){inta[4],x,b,c;for(inti=0;i<4;i++)cin>>a[i];sort(a,a+4);c=a[3]-a[0];x=a[1]-c;b=a[2]-c;cout<<x......
  • Educational Codeforces Round 149 (Rated for Div. 2)
    EducationalCodeforcesRound149(RatedforDiv.2)A-GrasshopperonaLine思路:只有两种情况,x整除k时为x-1和1,否则为xvoidsolve(){intx,k;cin>>x>>k;if(x%k==0){cout<<"2\n"<<x-1<<&qu......
  • js前端fetch参数
    constresponse=fetch(url,{method:"GET",//请求方式headers:{//定制http请求的标头"Content-Type":"text/plain;charset=UTF-8"},body:undefined,//post请求的数据体,因为此时为get请求,故为undefinedreferrer:"about:client",referrerPolicy:......
  • CodeTON Round 4 (Div. 1 + Div. 2, Rated, Prizes!) A-E
    CodeTONRound4(Div.1+Div.2,Rated,Prizes!) A.BeautifulSequenceinta[N],poi[N];voidsolve(){intn=read(),ans=0;for(inti=1;i<=n;i++){a[i]=read();}for(inti=1;i<=n;i++){if(a[i]<=i)ans=1;}......
  • 【CSS】div宽度由内部文字宽度决定
    默认div的宽度会占满全屏或由父级决定使用  width:fit-content;可以解决前后对比前:后: ......