最近开发了一个与富文本相关的功能,大概描述一下:通过富文本编辑器添加的内容,通过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. 五种网络IO模型以及多路复用IO中select/epoll对比

    下面都是以网络读数据为例 [2阶段网络IO] 第一阶段:等待数据 wait for data 第二阶段:从内核复制数据到用户 copy data from kernel to user 下面是5种网络 ...

  2. BETWEEN

    选取介于两个值之间的数据范围内的值.这些值可以是数值.文本或者日期. 选取 alexa 介于 1 和 20 之间的所有网站: SELECT * FROM table ; NOT BETWEEN 显示不 ...

  3. js遍历传参到html

    <p id="subp" hidden><button id= "upsub"shiro:hasPermission="sys:me ...

  4. watch监听变化

    <template> <div> 父级 <childCom1 @click.native="fn()"></childCom1> { ...

  5. eclipse链接mySQL数据库常见错误

    1错误: 解决: 2,用户名输入错误 解决:查看自己的正确用户名https://zhidao.baidu.com/question/248308313.html 3. 解决: 链接示例:https:/ ...

  6. 【MySQL】存储引擎

    " 目录 #. MySQL支持的存储引擎 1. InnoDB 2. MyISAM 3. NDB 4. Memory 5. Infobright 6. NTSE 7. BLACKHOLE My ...

  7. 基于SILVACO ATLAS的a-IGZO薄膜晶体管二维器件仿真(08)

    进展比较慢啊... 根据江南大学硕士论文IGZO/IZO双有源层薄膜晶体管特性的模拟研究: 其中, gCBa:类受主导带尾态 gVBd:类施主价带尾态 gGd:类施主氧空位态 NDeep:价带尾深施主 ...

  8. html解析のBeautifulSoup

    引子: 使用python爬虫对爬取网页进行解析的时候,如果使用正则表达式,有很多局限,比如标签中出现换行,或者标签的格式不规范,都有可能出现取不到数据,BeautifulSoup作为一个专门处理htm ...

  9. 传奇gee引擎,智能假人,假人脚本,geeM2假人

    开新区注意事项: 1.新区无任何玩家数据下可以运行“MirServer\假人行会初始化”目录下的“点我初始化假人行会.Bat”程序 2.默认假人后台管理密码为:2139263   ;--------- ...

  10. 在xwindows界面中切换KDE与GNOME

    在xwindows界面中切换KDE与GNOME 方法1: 在xwindows界面下通过菜单来切换,找到所需的菜单后执行,选择所需的桌面,重新启动xwindows即可. 方法2: 在命令提示符在xwin ...