关键词：
文章目录
一、前言
项目开发过程中，涉及在Web端维护富文本内容，通过APP端查看的相关的功能，功能描述大概如下：通过富文本编辑器添加的内容，通过view展示出来（这里用到了 Vue 的 v-html 指令）。
<view v-html="article"></view>
编辑了一个包含文章链接的长文本，等到APP端展示的时候发现，内容超出了（没有自动换行），且出现了左右滚动条，另外发现遇到文字就可以换行，如下图所示：
二、问题分析
在查资料的过程中发现，不只是字母不会自动换行，还有长数字也不会自动换行，造成这种现象的原因是<p>标签的问题。
三、解决方法
接下来介绍一下上面问题的两种解决方法：
3.1 对 input 标签设置
.input_content
WORD-WRAP:break-word;
TABLE-LAYOUT:fixed;
word-break:break-all;
3.2 对 input 标签内的 p 标签设置
.input_content >>> p
word-wrap: break-word;
考虑到内容展示使用的v-html指令，其值为字符串，故需要对该字符串进行正则替换。
//图片大小自适应
let contextTmp = context.replace(/\\<img/gi, '<img style="max-width:100%;height:auto" ');
// 长链接自适应
this.article = contextTmp.replace(/\\<p style=\\"/gi, '<p style="word-wrap: break-word; ');
注⚠️：对于图片大小自适应的解决方式与长链接类似，对于不同尺寸的图片需要在APP端展示时，通过正则替换设置图片大小来满足图片大小自适应。
四、延伸阅读 顶部状态栏穿透问题
通过设置占位符解决。
<view class="status_bar"></view>
.status_bar
position: fixed;
height: calc(var(--status-bar-height) * 1.2);
width: 100%;
background-color: rgba(255, 255, 255, 1);
z-index: 999;
五、拓展阅读
跨平台应用开发进阶(五十一)：html5（富文本内容）连续数字字母不自动换行问题分析及解决(代码片段)
文章目录一、前言二、问题分析三、解决方法3.1对input标签设置3.2对input标签内的p标签设置四、延伸阅读顶部状态栏穿透问题五、拓展阅读一、前言项目开发过程中，涉及在Web端维护富文本内容，通过APP端查看的相关的功... 查看详情
reactnative进阶（五十一）:样式梳理(代码片段)
文章目录一、前言二、样式引入方法三、常见属性及说明3.1背景3.2宽高尺寸3.3外边距相关(margin)3.4内边距相关(padding)3.5边框相关(border)3.6位置相关(position)3.7文本相关(Text)3.8弹性布局相关(Flex)3.9转换相关(transform)3.10图片相关3.11图像... 查看详情
matlab应用实战系列（五十一）-txt数据的读取完美教程
前言TXT文件是纯文本文件，matlab中读取文本文件的常用函数高级函数和低级函数两类型：高级函数（需要调用一些低级函数，语法简单方便使用，但是可定制性差）包括：load 从文本文件导入数据到MATLAB空间中importdata 从... 查看详情
跨平台应用开发进阶(五十四)：androidapp调试工具：adb(代码片段)
文章目录一、前言二、logcat命令参数三、格式化输出四、日志抓取五、应用示例5.1日志级别过滤六、拓展阅读一、前言ADB是一个功能强大的命令行工具。通过它可以直接和模拟器或真机进行交互。它是一个具有客户端和服务器端... 查看详情
跨平台应用开发进阶(二十一)：uni-app路由传参参数丢失问题解决方案探究(代码片段)
文章目录一、前言二、解决措施2.1应用全局变量globalData2.2应用全局变量Vuex2.3应用窗体通信postMessage2.4应用页面通信`uni.$emit(eventName,OBJECT)`三、延伸阅读uni-app实现内容文本置顶操作方案探究3.1场景再现3.2解决措施四、拓展阅... 查看详情
跨平台应用开发进阶(二十一)：uni-app路由传参参数丢失问题解决方案探究(代码片段)
文章目录一、前言二、解决措施2.1应用全局变量globalData2.2应用全局变量Vuex2.3应用窗体通信postMessage2.4应用页面通信`uni.$emit(eventName,OBJECT)`三、延伸阅读uni-app实现内容文本置顶操作方案探究3.1场景再现3.2解决措施四、拓展阅... 查看详情
ios开发进阶-富文本正则替换表情
移动端访问不佳，请访问我的个人博客最近写项目需要用到富文本解析字符串显示表情，下面是我使用正则替换实现富文本的方式，希望能帮助到大家先上效果图和demo地址实现过程中需要用到的知识点NSRegularExpression&... 查看详情
跨平台应用开发进阶(五十五)：uni-app实现内容分享(代码片段)
文章目录一、前言二、系统分享组件三、uniShareSDK调用四、拓展阅读一、前言APP开发过程中，需要实现分享功能。常用的分享实现方法包括：系统分享组件；uniShareSDK调用；二、系统分享组件uni.shareWithSystem(OBJECT)调... 查看详情
跨平台应用开发进阶(五十六)：应用渲染异常问题分析及解决(代码片段)
...足导致页面白屏问题之后，（详参博文《跨平台应用开发进阶(五十)uni-appiosweb-view嵌套H5项目白屏问题分析及解决》）又发现APP在iOS系统运行过程中，会高频出现页面黑屏、黑色区块，白屏问题。二、问题分析... 查看详情
跨平台应用开发进阶(五十三)：uni-app通过webview方式嵌套h5实现图片点击下载(代码片段)
文章目录一、前言二、实现方案三、拓展阅读一、前言在项目开发过程中，遇到uni-app通过webview嵌套H5项目，实现H5中图片点击下载的需求。二、实现方案实现思路：需要用到Bitmap，把base64转成bitmap文件对象，... 查看详情
跨平台应用开发进阶(五十三)：uni-app通过webview方式嵌套h5实现图片点击下载(代码片段)
文章目录一、前言二、实现方案三、拓展阅读一、前言在项目开发过程中，遇到uni-app通过webview嵌套H5项目，实现H5中图片点击下载的需求。二、实现方案实现思路：需要用到Bitmap，把base64转成bitmap文件对象，... 查看详情
跨平台应用开发进阶(五十)uni-appiosweb-view嵌套h5项目白屏问题分析及解决(代码片段)
文章目录一、前言二、问题分析三、解决方案3.1nvue页面替代vue页面3.2白屏检测刷新3.2.1自动刷新3.2.2手动刷新3.3总结四、拓展阅读一、前言应用uni-app框架开发好APP上架使用过程中，发现应用经过长时间由后台切换至前台时... 查看详情
跨平台应用开发进阶(五十)uni-appiosweb-view嵌套h5项目白屏问题分析及解决(代码片段)
文章目录一、前言二、问题分析三、解决方案3.1nvue页面替代vue页面3.2白屏检测刷新3.2.1自动刷新3.2.2手动刷新3.3总结四、拓展阅读一、前言应用uni-app框架开发好APP上架使用过程中，发现应用经过长时间由后台切换至前台时... 查看详情
跨平台应用开发进阶(四十一)使用xcode打包ios应用archive时四种证书的区别详解(代码片段)
文章目录一、archive四种模式二、相同点三、安装方式区别一、archive四种模式在应用XCode进行苹果打包的时候有以下四个选项可供选择，在此累述一下四种模式的含义：AppStore:用来发布到AppStore，使用发布证书编译。(pr... 查看详情
qt开发（五十一）——qtquick基础
QT开发（五十一）——QtQuick基础一、QtQuick简介 QT提供了两种独立的方法创建用户界面。 QtQuick模块为创建流畅、鲜活的用户界面提供了一种标记语言。QtQuick模块适合需要动画元素的界面，以及应用程序... 查看详情
跨平台应用开发进阶(三十一)：uni-app实现覆盖原生控件导航栏和tabbar全屏弹窗(代码片段)
文章目录一、前言二、实现方案三、拓展阅读一、前言应用uni-app跨平台框架进行项目开发过程中，需要实现版本更新时全页面弹窗，底部导航栏无法点击的效果。但是，在uni-app中popup弹窗及对话框的遮罩层是覆盖不... 查看详情
学习五十一
14.1NFS介绍14.2NFS服务端安装配置14.3NFS配置选项NFS介绍NFS是NetworkFileSystem的缩写NFS最早由Sun公司开发，分2,3,4三个版本，2和3由Sun起草开发，4.0开始Netapp公司参与并主导开发，最新为4.1版本NFS数据传输基于RPC协议，RPC为RemoteProcedureCal... 查看详情
跨平台应用开发进阶(五十四)：androidapp调试工具：adb(代码片段)
文章目录一、前言二、logcat命令参数三、格式化输出四、日志抓取五、应用示例5.1日志级别过滤六、拓展阅读一、前言ADB是一个功能强大的命令行工具。通过它可以直接和模拟器或真机进行交互。它是一个具有客户端和服务器端... 查看详情