关键词：
最近开发了一个与富文本相关的功能，大概描述一下：通过富文本编辑器添加的内容，通过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（富文本内容）连续数字字母不自动换行问题分析及解决(代码片段)
文章目录一、前言二、问题分析三、解决方法3.1对input标签设置3.2对input标签内的p标签设置四、延伸阅读顶部状态栏穿透问题五、拓展阅读一、前言项目开发过程中，涉及在Web端维护富文本内容，通过APP端查看的相关的功... 查看详情
跨平台应用开发进阶(五十一)：html5（富文本内容）连续数字字母不自动换行问题分析及解决(代码片段)
文章目录一、前言二、问题分析三、解决方法3.1对input标签设置3.2对input标签内的p标签设置四、延伸阅读顶部状态栏穿透问题五、拓展阅读一、前言项目开发过程中，涉及在Web端维护富文本内容，通过APP端查看的相关的功... 查看详情
laya富文本htmldivelement
...片显示示例如下：7、追加文本内容appendHtml示例如下：8、解决IOS手机上英文字母显示偏下的问题在style样式中加垂直向上对齐valign：top属性示例如下：总结：以上的方法仅供参考，某些方法只是实现方式的一种，开发者也可以通... 查看详情
css文本字母数字过长自动换行处理
...会被浏览器保留。其行为方式类似HTML中的pre标签。nowrap文本不会换行，文本会在在同一行上继续，直到遇到br标签为止。pre-wrap保留空白符序列，但是正常 查看详情
css中a元素放长英文字母或者数字自动换行的解决
在做链接分享页面的时候遇到a元素中的下载链接长英文溢出不换行的问题在给他以及他父元素设置宽度依然没有解决这个问题最后解决办法给元素加上word-wrap:break-word解释：使用break-word时，是将强制换行。 查看详情
如何用纯文本内容控件替换富文本内容控件
】如何用纯文本内容控件替换富文本内容控件【英文标题】：HowtoreplaceRichTextContentControlbyPlainTextContentControl【发布时间】：2014-02-1011:00:24【问题描述】：我们刚刚发现富文本内容控件不允许换行。我们有数千个用作模板的word文档... 查看详情
解决字母不换行的问题
当限制了宽度的时候，出现连续超长的字母段的时候，会出现不换行的现象。解决方法 word-wrap:break-word; 查看详情
数字字母不换行(代码片段)
在宽度固定的div中文字会自动换行，但数字、字母不会word-break:break-all;overflow:hidden;//有上面一行即可 查看详情
span元素文字自动换行
...word-wrap:break-word强制自动换行搞定。word-break:break-all会当文本达到宽度就强制换行，而不管单词有没有完整显示，不推荐使用。比如consulate只显示cons就截断了。而word-wrap:break-word会把c 查看详情
关于网站开发中div标签中设置宽度后其中文本溢出的原因和解决方法
一.问题产生的原因 当我们为div标签声明了宽度，但是仍然会出现文本越界的情况，不知道大家有没有发现，只有文本内容为单词或者纯数字的时候才会出现这种情况为此我特意测试了两种情况，结果如下： ①当文... 查看详情
vue富文本编辑，编辑自动预览，单个图片上传不能预览的问题解决：
//预览<divclass="htmlViewBox"> <pv-html="activity_html_defaultMsg"v-show="htmlDefaultMsg"></p> <pv-show="defaultMsg==‘‘&&htmlDefaultMsg==‘‘">请在富文本编辑器内容</p></div& 查看详情
html5文字自动换行怎么设置
...撑开，因此需要再加上后面一句(word-wrap:break-word;)就可以解决。此样式可以让表格中的一些连续的英文单词自动换行。http://www.knowsky.com/(1)语法：word-break:normal|break-all|keep-all参数：no 查看详情
css解决无空格太长的字母,数字不会自己主动换行的问题
事实上非常easy，代码例如以下所看到的，注意Style：<divclass="detail_title"style="word-break:break-all;"><%=StringUtil.toHTML(title)%></div>默认情况下，一个DIV或者其它元素的文本，假设都是无文字分隔符，无空格，则不会自己主动... 查看详情
解决一行文本溢出隐藏点击展开之后全部显示并自动换行每行长度一致问题(代码片段)
...符多余2个i，就会出现长短不一的情况；)本文所展示方法解决了这个问题。HTML<divstyle="width:250px;position:absolute;"><divid="content">firstmygazetowardthemoon,butthemoonshinesontheditch.“我本一心向明月，奈何明月照沟渠”</div><aOncli... 查看详情
正则表达式
1.正则表达式：记录文本的规则的代码\b：元字符，单词分界处，匹配一个位置.：元字符，匹配出了除了换行符以外的任意字符*：元字符，指定*前边的内容可以连续重复以使整个表达式得到匹配\d：元字符，匹配一位数字\s：匹... 查看详情
css实现连续数字和英文的自动换行的方法
1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap:break-word;或者word-break:break-all;实现强制断行 #wrap{word-break:break-all;width:200px;} 或者 #wrap{word-wrap:break-word;width:200px;} <divid="wrap"> 查看详情
彻底搞懂css文本空白换行问题
本文前提：文本的父容器是块级元素。首先，我们来整理一下与换行有关的3个CSS属性： word-break该属性决定文本内容超出容器时，浏览器是否自动插入换行符。属性值：normal：默认换行规则——英文以词为单位换行，... 查看详情
span中显示的内容不自动换行
...行？本人无财富值了只能在这厚着脸皮向大家请教了你的内容是不是连续的英文字符啊？这种没用的内容多出来就隐藏掉吧。正常的英文单词，或者中文内容都可以自动换行的。参考技术Aspan是内联的，可以把它转换成区块才能... 查看详情