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

jemygraw 发布于2019-08-21 11:49 / 2222人阅读

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

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

而想要的结果应该是和log的结果一样，是这样的：

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

字符“↵”是换行的意思，但在前端展示的只是空格，从字符串中indexOf（“↵”）得到的是：

并没有得到“↵”。
但是我们indexOf（“ ”）得到：

所以可以由此入手：

let arr = name.split("
")
    const arrItems = arr.map((item)=>{
              {item}
          })

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

私有云 GPU服务器 js每十个换行的算法文字不换行数据不换行 htmldiv不换行

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87154.html

使用 <wbr> 解决长 URL 的换行问题

摘要：开发中，屏幕宽度有限，超长文字必须换行。尝试原生方法无法解决问题，只好摸索手动断行的做法。用解决这个问题困扰了我很久，直到前两天，我突然发现原来有软换行的存在。本案例中，使用实际上是想借用浏览器计算表格各列宽度的机制。问题我们知道，世界上文字主要有两种：一种是以中文为代表的象形文字；另一种是以英法俄等为代表的拼音语系。前者的换行很简单，每个单字都有自己的意义，所以每个字后面都可以换...

104828720 2019-08-30 11:02 评论0 收藏0
使用 <wbr> 解决长 URL 的换行问题

摘要：开发中，屏幕宽度有限，超长文字必须换行。尝试原生方法无法解决问题，只好摸索手动断行的做法。用解决这个问题困扰了我很久，直到前两天，我突然发现原来有软换行的存在。本案例中，使用实际上是想借用浏览器计算表格各列宽度的机制。问题我们知道，世界上文字主要有两种：一种是以中文为代表的象形文字；另一种是以英法俄等为代表的拼音语系。前者的换行很简单，每个单字都有自己的意义，所以每个字后面都可以换...

lily_wang 2019-08-02 15:12 评论0 收藏0
CSS3 文本换行

摘要：文本换行其实是个非常常用但并不起眼的特性。在中日韩文情况下，和有区别，见下图中日韩文情况下，仍旧等于没有设，浏览器选择在文字或标点符号处换行。但设成后，将不再允许断词哪怕是中日韩文，只能像英语系一样根据半角空格或标点来换行。文本换行其实是个非常常用但并不起眼的特性。你什么都不用设，浏览器自动就会换行。例如英语，浏览器会根据容器尺寸，选择在半角空格或连字符处换行。例如中文，浏览器会选择...

EasonTyler 2019-08-30 13:16 评论0 收藏0
CSS3 文本换行

摘要：文本换行其实是个非常常用但并不起眼的特性。在中日韩文情况下，和有区别，见下图中日韩文情况下，仍旧等于没有设，浏览器选择在文字或标点符号处换行。但设成后，将不再允许断词哪怕是中日韩文，只能像英语系一样根据半角空格或标点来换行。文本换行其实是个非常常用但并不起眼的特性。你什么都不用设，浏览器自动就会换行。例如英语，浏览器会根据容器尺寸，选择在半角空格或连字符处换行。例如中文，浏览器会选择...

chinafgj 2019-08-01 16:05 评论0 收藏0
【CSS】小妙招，各种问题总结方法处理

摘要：应用常例是属性设置水平放置后出现间隙。边框产生的位置只有两个地方，在内容内，在内容外，请看下面介绍。产生在内容外，这个好理解，也是我们最普遍见到的，就是在内容外绘制边框。1.实现div文字溢出自动省略号截取 overflow:hidden; /*超过部分不显示*/ 　　　　　　text-overflow:ellipsis; /*超过部分用点点表示*/ 　　　...

springDevBird 2019-04-23 13:28 评论0 收藏0