解决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 ...
随机推荐
- FromBase64String 输入的不是有效的 Base-64 字符串,因为它包含非 Base-64 字符、两个以上的填充字符,或者填充字符间包含非法字符
js前台: <input id="upload_img_input" v-on:change="onFileChange" type="file ...
- Java - Test - TestNG: testng.xml 简介
1. 概述 简介 testng.xml 中的格式, 元素 2. 背景 testng.xml 概述 测试套件 的配置文件 问题 一下生成了那么多内容 我有点看不懂 一上来就看不懂, 其实很正常, 慢慢说 ...
- apache的下载
官网http://www.apache.org/ 首页第三行左右 点a number of third party vendors 再点第一个ApacheHaus 最后来到windows的下载页面 h ...
- pyqt5 通过QLinearGradient 绘制取色板
要绘制HSV取色板,一般通过绘制前景色和背景色的方式实现,先绘制前景,然后绘制背景,前景是HSV颜色空间,从左到右,背景是亮度,从上到下,xs和ys是鼠标的当前的位置. def graphicsVie ...
- JS高级---实例对象使用属性和方法层层的搜索 (实例对象-->原型对象-->报错)
实例对象使用属性和方法层层的搜索: 实例对象使用的属性或者方法, 先在实例中查找, 找到了则直接使用: 找不到则, 再去实例对象的__proto__指向的原型对象prototype中找, 找到了则 ...
- [转载]PHP开发环境 AppServ 2.5.10 安装及修改
[转载]PHP开发环境 AppServ 2.5.10 安装及修改 原文地址:PHP开发环境 AppServ 2.5.10 安装及修改 appserv下载地址:http://www.appservn ...
- GO:go语言介绍
什么是go语言 Google开源 编译型语言 21世纪的C语言 go开发团队: go的特点 语法简洁 开发效率高 执行性能好 发展现状 最近新兴的行业公司一般会使用go语言作为主要开发语言 容器虚拟化 ...
- 自定义xmlhttprequest
/** * xhr_proxy.js * 通过劫持原生XMLHttpRequest实现对页面ajax请求的监听 * @author binaryfire */ const READY_STATE_CH ...
- go get下载包失败问题
文章引用自 解决go get下载包失败问题 从github克隆 golang在github上建立了一个镜像库,如https://github.com/golang/net就对应是 https://go ...
- Java面向对象private
1. 类 package cn.itcast.day06.demo03; /* 对于基本类型当中的boolean值,Getter方法一定要写成isXxx的形式,而setXxx规则不变. */ publ ...