ios div或p标签输入长符号或英文不自动换行

aholic.895

已于 2023-11-27 17:15:40 修改

阅读量300

点赞数

文章标签： vue.js scss

于 2023-10-17 15:16:51 首次发布

本文链接：https://blog.csdn.net/qq_62884240/article/details/133884834

版权

本文介绍了在iOS/Android开发中，如何使用CSS的word-break和word-wrap属性实现文本换行，以及在Vue中使用v-html处理用户输入防止XSS攻击的方法，包括使用lodash的escape函数对HTML特殊字符进行转义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ios css强制换行 css换行<br>_mob6454cc6441b6的技术博客_51CTO博客

 //$escape 防止xss攻击，style解决符号不自动换行问题
<p style="word-break: break-all;word-wrap: break-word;"
    v-html="`<span>${$escape(itemc.contactText)}</span>`"
 ></p>

使用：

对用v-html和innerHTML加载的客户信息进行转义
如果显示内容里面有html片段，一定需要用v-html或者innerHTML加载，例如：

<div v-html="`<span>${message}</span>`"></div>
里面的message是客户自己输入的信息，如果此时是恶意的dom片段肯定会引起XSS攻击。此时我们可以对“<”，">"转译成“<”，“>”。然后再输入到页面。

可以使用lodash里面的escape方法对客户信息进行转译。如下：

import _escape from 'lodash/escape'
Vue.prototype.$escape = _escape
在vue中插入一个全局方法，对需要转译的数据就使用这个方法：

<div v-html="`<span>${$escape(message)}</span>`"></div>

xss攻击参考网址：XSS系列二：基于vue搭建的网站如何防范XSS攻击_vue xss过滤方法-CSDN博客