索鸟网

  1. 首页
  2. 获得字符串包含↵,渲染到页面不换行的解决办法

获得字符串包含↵,渲染到页面不换行的解决办法


从接口得到的数据格式是这样的:

在浏览器中log的结果是这样的:

而想要的结果应该是和log的结果一样,是这样的:

但结果直接渲染出来却是这样的:

字符“↵”是换行的意思,但在前端展示的只是空格,从字符串中indexOf(“↵”)得到的是:

并没有得到“↵”。
但是我们indexOf(“\n”)得到:

所以可以由此入手:

let arr = name.split("\n")
    const arrItems = arr.map((item)=>{
              <p>{item}</p>
          })
          

就可以得到我们想要的效果:

javascript

来源地址:https://segmentfault.com/a/1190000010574613 版权归作者所有!

相关教程

  • 字符串包含

    题目描述 给定两个分别由字母组成的字符串A和字符串B,字符串B的长度比字符串A短。请问,如何最快地判断字符串B中所有字母是否都在字符串A里? 为了简单起见,我们规定输入的字符串只包含大写英文字母,请实现函数bool StringContains(string &A, string &B) 比如,如果是下面两个字符串: String 1:ABCD Stri
  • Python 输出不换行

    python 输出不换行 python 3的写法是: print(‘hello’, end=”) 举个例子: >>> def clear(): print("hello ",end="") print("world") >>> clear() hello world $(function () {
  • div中英文无法自动换行的解决办法

    在一个设定好宽度的div中,当我们输入的中文文字长度超过了设定宽度时,会自动换到下一行。   但是,如果输入的是英文字母,那么,无论你div设定宽度为多少,英文字母都是不换行直接在同一行输出,导致div的宽度远远超出设定的大小。  原因:这是因为div中,英文字母之间没有空格的话,它会默认认为这是一个英文单词,所以单词就一次输出不换行。那么,
  • html div 不换行超出显示省略号

    .div{font-size:18px; color:#000;line-height:24px;white-space:nowrap;text-overflow:ellipsis;word-break:break-all;overflow:hidden;}
  • 浏览器渲染页面过程与页面优化

    由一道面试题引发的思考: 从用户输入浏览器输入url到页面最后呈现 有哪些过程?一道很常规的题目,考的是基本网络原理,和浏览器加载css,js过程。 答案大致如下: 用户输入URL地址 浏览器解析URL解析出主机名 浏览器将主机名转换成服务器ip地址(浏览器先查找本地DNS缓存列表 没有的话 再向浏览器默认的DNS服务器发送查询请求 同时缓存) 浏览器
  • Android:去除字符串中空格制表符换行

    两种方法 去除字符串中空格制表符换行: public String checkString(String str) { if (TextUtils.isEmpty(str)) return ""; int len = str.length(); int i = 0, j = 0; char[
  • Java 按字节获得字符串(中文)长度

    Java 按字节获得字符串(中文)长度 引自:http://songjianyong.iteye.com/blog/1552973 package com.yang.string; import java.io.UnsupportedEncodingException; /** * 在Java中按字节获得字符串长度的两种方法 * */ public class Len
  • 解决 SpringBoot 不继承父 parent 打包不包含依赖的问题

    由于项目需要继承自己平台的父 parent , 有的模块是纯 api ,不能有任何依赖, 所以父 parent 不能直接引入 springboot, 单独给非 boot 项目排除依赖的话又特别的麻烦, 且不好把控。 记得刚接触 SpringBoot 时看的官方文档里面有给方案。打开官网找了找。 官方文档:using-boot-maven-without