解决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 ...
随机推荐
- 040_字符串连接符 041_条件运算符目 042_运算符优先级_逻辑与或优先问题 043_自动类型转化 044_强制类型转换 045_基本类型常见错误_溢出_L问题
040_字符串连接符 package test_package; /** * 字符串运算符 * @author * */public class TestOperator05 { public sta ...
- php 裁剪图片并处理png图片背景变黑
/*TODO 图片裁剪*/ function img_cutting($file_old,$file_new,$h,$w){ $image = $file_old; // 原图 $dir = 'xxx ...
- Git - 02. git 版本库简述: 类比平行宇宙
1. 概述 简单描述 平行宇宙世界观 将 git 与 平行宇宙世界观 做一个类比, 方便理解 熟悉科幻, 或者具体点, 是 漫威宇宙 的朋友, 可以稍微轻松一点 这个是 第一次 重写后的版本. 代码在 ...
- CSS学习(10)行盒盒模型
常见的行盒:包含具体内容的元素 span.strong.em.i.img.video.audio 显著特点: 1.盒子沿着内容延伸 2.行盒不能设置宽高,调整行盒的宽高,应使用字体大小.行高.字体类型 ...
- 基于jmeter+ant实现的接口自动化测试
jmeter+ANT接口自动化测试框架 项目说明 本框架是一套基于jmeter+Ant+Excel+Python而设计的数据驱动接口自动化测试框架,jmeter 作为执行器,Ant 作为构建工具,进行 ...
- red hat 报错:apt-get:找不到命令
Linux有两个系列:一个是RedHat系列,一个是Debian系列. RedHat系列:Redhat.Centos.Fedora等 Debian系列:Debian.Ubuntu等 RedHat 系列 ...
- django 创建管理员用户
7.2 create 创建管理员用户: python manage.py run server python manage.py createsuperuser password :123456789 ...
- Web基础了解版07-EL表达式-运算符-11个隐式对象
EL EL(Expression Language)是JSP内置的表达式语言,用以访问页面的上下文以及不同作用域中的对象 ,取得对象属性的值,或执行简单的运算或判断操作.EL在得到某个数据时,会自动进 ...
- linux 安装 Jenkins
yum的repo中默认没有Jenkins,需要先将Jenkins存储库添加到yum repos,执行下面的命令: wget -O /etc/yum.repos.d/jenkins.repo https ...
- opencv:像素统计信息
#include <opencv2/opencv.hpp> #include <iostream> using namespace cv; using namespace st ...