解决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 ...
随机推荐
- Codeforces Round #608 (Div. 2)D(贪心)
#define HAVE_STRUCT_TIMESPEC #include<bits/stdc++.h> using namespace std; ],b[],c[]; int u,v; ...
- 「JSOI2015」圈地
「JSOI2015」圈地 传送门 显然是最小割. 首先对于所有房子,权值 \(> 0\) 的连边 \(s \to i\) ,权值 \(< 0\) 的连边 \(i \to t\) ,然后对于 ...
- web开发中的一些不常见的概念
1.惊群 [活跃]星际争霸小王子 就是当你在车站时,一堆拉客的人一拥而上,想你坐他的车,于是就惊群了.但你只能坐一个车,所以没拉到你的就悻悻而归,于是return false[活跃]星际争霸小王 2 ...
- springboot 服务卡死 连接池查询无响应问题解决
排查背景:基于nacos + springboot + druid +mybatis + mysql的环境,服务突然就出现不可访问,所有连接都超时,重启就可以使用一会,过一会就又不可用了 排查出来的原 ...
- 查看svn 提交记录
svn log -v -r {2019-8-11}:{2019-8-16} -l 30 | sed -n '/wangyue01/,/--$/ p'其中:-r {2018-9-10}:{2018-9- ...
- about Base64
用webservice传送文件的时候发现,如果发送的文件中有0x00字符,会被认为是字符串结尾,后面的内容就发送不过去,因此需要对不是纯文本格式的文件做BASE64编码,这样文件中就不会有0x00这样 ...
- C语言:找出一个大于给定整数m且紧随m的素数,-求出能整除x且不是偶数的数的个数,
//函数fun功能:找出一个大于给定整数m且紧随m的素数,并作为函数值返回. #include <stdlib.h> #include <conio.h> #include & ...
- jmeter csv 插件讲解
1.变量名称 name,pwd 格式表示因为文本中分割默认是逗号所以变量设置也是按此格式如果想按其他格式可以在分隔符栏自定义 2.忽略首行: 有的csv读取你希望读取的数据有header如: user ...
- idea如何提取变量(拆分变量赋值和声明)
需求描述: 我们时常遇到某个在某个局部作用域声明的变量,想要用在另一个地方,此时就需要在作用域外部声明变量,在作用域中给变量赋值. 在eclipse中这个功能和提取变量在一起,我们可以方便的拆分变量的 ...
- LeetCode练题——35. Search Insert Position
1.题目 35. Search Insert Position Easy 1781214Add to ListShare Given a sorted array and a target value ...