解决HTML5(富文本内容)连续数字、字母不自动换行
最近开发了一个与富文本相关的功能,大概描述一下:通过富文本编辑器添加的内容,通过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(富文本内容)连续数字、字母不自动换行的更多相关文章
- Squire – 简洁的 HTML5 富文本编辑器
Squire 是一个简洁的 HTML5 富文本编辑器,它提供了强大的跨浏览器的标准化,超级轻巧灵活.它是建立在现在和未来并作为研究,因此并不支持那些古老的浏览器. 在线演示 源码下载 您可能 ...
- wxParse解析富文本内容使点击图片可以选中并实现放大缩小
wxParse解析富文本内容不多说,之前写过步骤介绍,主要是在使用过程中发现解析的富文本内容里有图片时有的可以点击放大缩小,有的点击却报错,找不到imgUrls. 经过排查发现:循环解析的富文本内容正 ...
- PHP将富文本内容去除各类样式图片等只保留txt文本内容(作用于SEO的description)
1.从数据库读取富文本内容样式如下: <p style=";text-indent: 0;padding: 0;line-height: 26px"><span ...
- html处理富文本内容,避免XSS工具类
import org.apache.commons.lang3.StringEscapeUtils;import org.jsoup.Jsoup;import org.jsoup.safety.Whi ...
- Android WebView 加载富文本内容
WebView加载数据的方式有两种: 1. webView.loadUrl(data);//加载url 2. webView.loadDataWithBaseURL(null,data, " ...
- springmvc 后台实体类接受前端json字符串时,其中一个属性content 接受富文本内容时 标签<p>、<span> 这些标签丢失问题解决
问题描述: 前端一个字段 <script id="editor" type="text/plain" name="content" s ...
- (转)解决NSMutableAttributedString富文本,不同文字大小水平轴对齐问题(默认底部对齐)
默认是底部对齐,其实对的也不齐, 目标效果: 代码: NSBaselineOffsetAttributeName 基线偏移量: 调整: NSBaselineOffsetAttributeName的值 ...
- php将富文本内容图片上传到oss并替换
/** * php 提取html中图片并替换 */ //要替换的内容 //提取图片路径的src的正则表达式 $match_str = '/(<img([^>]*)\s*src=(\'|\& ...
- Angular4 innerHtml呈现富文本内容样式
import { Pipe, PipeTransform } from "@angular/core"; import { DomSanitizer } from '@angula ...
随机推荐
- centos 7 配置samba
yum -y install samba samba-common samba-client vi /etc/samba/smb.conf #修改samba服务器的主配置文件 [global] wo ...
- openstack自动化搭建脚本
Openstack平台部署+节点扩容 1)搭建脚本 #!/bin/bash #openstack私有云平台部署 #脚本使用前提:三台虚拟机openstack(ip地址:.11至少4G内存,100G硬盘 ...
- iOS 优化ipa包,减小安装包大小
https://www.jianshu.com/p/a49d59b01669 项目打包之后.ipa包的大小是118.9M,上传到App Store后iPhone6s上显示85.5M,下载时间太长,所以 ...
- AC自动机讲解超详细
begin:2019/5/2 感谢大家支持! AC自动机详细讲解 AC自动机真是个好东西!之前学KMP被Next指针搞晕了,所以咕了许久都不敢开AC自动机,近期学完之后,发现AC自动机并不是很难,特别 ...
- CCF 试题编号: 201909-4 试题名称: 推荐系统
这题是stl的综合应用,map要想快,直接上unordered_map,这样查询接近O(1),是不是很嗨皮. 思路其实还是很简单的,type+id做个Hash,由于set.insert的第一个返回值是 ...
- leetcode929 Unique Email Addresses
Every email consists of a local name and a domain name, separated by the @ sign. For example, in ali ...
- Scrapy 命令
Scrapy提供了两种类型的命令.一种必须在Scrapy项目中运行(针对项目(Project-specific)的命令),另外一种则不需要(全局命令).全局命令在项目中运行时的表现可能会与在非项目中运 ...
- JVM 初始
我们刚学习java的时候,从来没有想过new一个对象后,需要我们手动去管理过他的内存空间释放,因为我们知道java有GC垃圾回收器这哥们的存在,他会帮我们处理好一切,这就好比我是皇帝,我想在哪建个行宫 ...
- 【PAT甲级】1098 Insertion or Heap Sort (25 分)
题意: 输入一个正整数N(<=100),接着输入两行N个数,表示原数组和经过一定次数排序后的数组.判断是经过插入排序还是堆排序并输出再次经过该排序后的数组(数据保证答案唯一). AAAAAcce ...
- 【译】高级T-SQL进阶系列 (七)【上篇】:使用排序函数对数据进行排序
[译注:此文为翻译,由于本人水平所限,疏漏在所难免,欢迎探讨指正] 原文链接:传送门. 什么是排序函数(Ranking Functions)? 排序函数基于一组记录的集合返回一个排序值.一个排序值其实 ...