跨平台应用开发进阶(五十一)：HTML5（富文本内容）连续数字、字母不自动换行问题分析及解决

文章目录

一、前言
二、问题分析
三、解决方法
- 3.1 对 input 标签设置
- 3.2 对 input 标签内的 p 标签设置
四、延伸阅读顶部状态栏穿透问题
五、拓展阅读

一、前言

项目开发过程中，涉及在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;
}

五、拓展阅读

《Cross-platform APP》

跨平台应用开发进阶(五十一)：HTML5（富文本内容）连续数字、字母不自动换行问题分析及解决相关推荐

跨平台应用开发进阶(四十一)使用Xcode打包 iOS 应用 archive 时四种证书的区别详解
文章目录一.archive 四种模式二.相同点三.安装方式区别四.iOS开发者账号(企业版)申请攻略 4.1 苹果开发者账号类型 4.2 企业版开发者账号的优势是什么? 4.3 企业版开发者账 ...
跨平台应用开发进阶(六十一)：uni-app 跨平台技术开发框架可行性调研
文章目录一.流程类二.研发类(uni-app框架) 三.心得分享(研发踩坑&uni-app踩坑) 四.拓展阅读一.流程类 IOS和安卓企业开发者账户申请流程(申请渠道.需要提供的相关证明 ...
跨平台应用开发进阶(三十九)uni-app实现内容分享
文章目录一.前言二.系统分享组件三.uniShare SDK调用四.题外话 4.1 不支持的分享类型 4.2 微信转发链接不显示图片和描述文字五.拓展阅读一.前言 APP开发过程中,需要实 ...
跨平台应用开发进阶(五十四)：Android APP调试工具：ADB
文章目录一.前言二.logcat命令参数三.格式化输出四.日志抓取五.应用示例 5.1 日志级别过滤六.拓展阅读一.前言 ADB是一个功能强大的命令行工具.通过它可以直接和模拟器或真机进 ...
跨平台应用开发进阶(五十八)：短链基本工作原理与实现方案
文章目录一.短链是什么二.为什么要使用短链三.短链跳转基本原理四.短链实现步骤五.使用哈希算法生成短链 5.1 其他方法生成短链 5.2 实现方案六.短链生成工具 6.1 网站工具:ft1 ...
跨平台应用开发进阶(十一) ：uni-app 实现IOS原生APP-云打包集成极光推送(JG-JPUSH)详细教程
文章目录一.前言二.资源三.集成四.遇到的问题及解决措施 4.1 IOS开发者证书无推送权限 4.2 manifest中并没有配置push模块.但云端打包ios就是一直报Code Signin ...
跨平台应用开发进阶(十二) ：uni-app 实现应用桌面图标角标提示及应用跳转
文章目录一.前言二.实现 2.1 集成极光实现 2.1.1 通道支持 2.1.2 iOS 角标 2.1.3 华为角标 2.1.4 小米角标 2.1.5 vivo 角标 2.2 H5+实现三.遇到 ...
跨平台应用开发进阶(三十)：uni-app 实现集成火山视频直播服务
文章目录一.前言二.技术实现 2.1 web-view组件在app中的窗体关系和plus.webview操作方式三.双向通信 3.1 uni-app与内嵌网页通信 3.2 内嵌网页向uni-ap ...
跨平台应用开发进阶(四十三)一文走近网络层抓包工具：WhireShark
文章目录一.前言二.条件过滤三.字段含义四.TCP连接 4.1 三次握手示例五.色彩规则六.分析方法 6.1 Packet size limited during capture 6.2 ...

跨平台应用开发进阶(五十一)：HTML5（富文本内容）连续数字、字母不自动换行问题分析及解决

文章目录

一、前言

二、问题分析

三、解决方法

3.1 对 input 标签设置

3.2 对 input 标签内的 p 标签设置

四、延伸阅读顶部状态栏穿透问题

五、拓展阅读

跨平台应用开发进阶(五十一)：HTML5（富文本内容）连续数字、字母不自动换行问题分析及解决相关推荐

最新文章

热门文章

跨平台应用开发进阶(五十一)：HTML5（富文本内容）连续数字、字母不自动换行问题分析及解决

文章目录

一、前言

二、问题分析

三、解决方法

3.1 对 input 标签设置

3.2 对 input 标签内的 p 标签设置

四、延伸阅读 顶部状态栏穿透问题

五、拓展阅读

跨平台应用开发进阶(五十一)：HTML5（富文本内容）连续数字、字母不自动换行问题分析及解决相关推荐

最新文章

热门文章

四、延伸阅读顶部状态栏穿透问题