最近开发了一个与富文本相关的功能,大概描述一下:通过富文本编辑器添加的内容,通过input展示出来(这里用到了 Vue 的 v-html 指令)。

  也是巧合,编辑了一个只有数字组成的长文本,等到展示的时候发现,内容超出了(没有自动换行),另外发现遇到文字就可以换行,如下图所示:

  在查资料的过程中发现,不只是数字不会自动换行,还有字母也不会自动换行,造成这种现象的原因是<p>标签的问题。

解决方法:

  接下来介绍一下上面问题的两种解决方法:

  1.方法一——对input标签设置

.input_content{
WORD-WRAP:break-word;
TABLE-LAYOUT:fixed;
word-break:break-all;
}

  2.方法二——对input标签内的p标签设置

.input_content >>> p {
word-wrap: break-word;
}

  

解决HTML5(富文本内容)连续数字、字母不自动换行的更多相关文章

  1. Squire – 简洁的 HTML5 富文本编辑器

    Squire 是一个简洁的 HTML5 富文本编辑器,它提供了强大的跨浏览器的标准化,超级轻巧灵活.它是建立在现在和未来并作为研究,因此并不支持那些古老的浏览器. 在线演示      源码下载 您可能 ...

  2. wxParse解析富文本内容使点击图片可以选中并实现放大缩小

    wxParse解析富文本内容不多说,之前写过步骤介绍,主要是在使用过程中发现解析的富文本内容里有图片时有的可以点击放大缩小,有的点击却报错,找不到imgUrls. 经过排查发现:循环解析的富文本内容正 ...

  3. PHP将富文本内容去除各类样式图片等只保留txt文本内容(作用于SEO的description)

    1.从数据库读取富文本内容样式如下: <p style=";text-indent: 0;padding: 0;line-height: 26px"><span ...

  4. html处理富文本内容,避免XSS工具类

    import org.apache.commons.lang3.StringEscapeUtils;import org.jsoup.Jsoup;import org.jsoup.safety.Whi ...

  5. Android WebView 加载富文本内容

    WebView加载数据的方式有两种: 1. webView.loadUrl(data);//加载url 2. webView.loadDataWithBaseURL(null,data, " ...

  6. springmvc 后台实体类接受前端json字符串时,其中一个属性content 接受富文本内容时 标签<p>、<span> 这些标签丢失问题解决

    问题描述: 前端一个字段 <script id="editor" type="text/plain" name="content" s ...

  7. (转)解决NSMutableAttributedString富文本,不同文字大小水平轴对齐问题(默认底部对齐)

    默认是底部对齐,其实对的也不齐, 目标效果:  代码: NSBaselineOffsetAttributeName 基线偏移量: 调整: NSBaselineOffsetAttributeName的值 ...

  8. php将富文本内容图片上传到oss并替换

    /** * php 提取html中图片并替换 */ //要替换的内容 //提取图片路径的src的正则表达式 $match_str = '/(<img([^>]*)\s*src=(\'|\& ...

  9. Angular4 innerHtml呈现富文本内容样式

    import { Pipe, PipeTransform } from "@angular/core"; import { DomSanitizer } from '@angula ...

随机推荐

  1. Codeforces Round #614 (Div. 2)E(思维,构造,DP)

    构造边权,从0开始给边赋值,初始选取一条边权为0,每次赋值的贡献为这一条链两侧的结点(包含链的端点)个数之积,下一次赋值以当前链其一端点续一条边,边权为上次赋的值+1.先DFS找到点的组合这条链两侧结 ...

  2. SpringAOP学习之5种通知

    一.Spring的AOP分为以下5种类型通知 ①前置通知(Before):在连接点执行前执行该通知 ②正常返回通知(AfterReturning):在连接点正常执行完后执行该通知,若目标方法执行异常则 ...

  3. Spring中如何使用工厂模式实现程序解耦?

    目录 1. 啥是耦合.解耦? 2. jdbc程序进行解耦 3.传统dao.service.controller的程序耦合性 4.使用工厂模式实现解耦 5.工厂模式改进 6.结语 @ 1. 啥是耦合.解 ...

  4. MyBatis-Spring整合之方式2

    提前叨叨:此方法优化了上一个方式的事务支持,同时简化了一个bean的配置 1.在方式1的基础上修改UserDaoImp文件,改用使用继承SqlSessionDaoSupport的方式.代码如下: pu ...

  5. 洛谷 P2118 比例简化(枚举)

    嗯... 题目链接:https://www.luogu.org/problem/P2118 这道题的出题人很善良,l的范围不是很大,所以我们可以逐一枚举. 本题主要思想就是把所有的比例都转换为乘积的形 ...

  6. P1567

    最大子数组和问题,dp或者分治.. #include <bits/stdc++.h> #define rep(i, a, b) for(int i = a; i <= b; i++) ...

  7. 【Android】网络通信

    https://www.bilibili.com/video/av78497129?p=4 本文为此视频笔记 1.一些标准设定 (读头部和内容) --->运行,出现权限警告: --->运行 ...

  8. KK音标

    目录 KK音标 参考 音标发音 音标口诀 五个规则 KK音标

  9. C# DataTable去重,根据列名去重保留其他列

    //去掉重复行 DataView dv = table.DefaultView; table = dv.ToTable(true, new string[] { "name", & ...

  10. Django框架之模板路径及静态文件路径配置

    内容: (1)模板文件路径的配置 (2)静态文件路径的配置 一.模板文件路径的配置 模板文件主要通过jinja2模板进行渲染html页面,实现动态页面. 步骤一:创建一个template的文件夹,用于 ...