最近开发了一个与富文本相关的功能,大概描述一下:通过富文本编辑器添加的内容,通过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(富文本内容)连续数字、字母不自动换行的更多相关文章

  1. Squire – 简洁的 HTML5 富文本编辑器

    Squire 是一个简洁的 HTML5 富文本编辑器,它提供了强大的跨浏览器的标准化,超级轻巧灵活.它是建立在现在和未来并作为研究,因此并不支持那些古老的浏览器. 在线演示      源码下载 您可能 ...

  2. wxParse解析富文本内容使点击图片可以选中并实现放大缩小

    wxParse解析富文本内容不多说,之前写过步骤介绍,主要是在使用过程中发现解析的富文本内容里有图片时有的可以点击放大缩小,有的点击却报错,找不到imgUrls. 经过排查发现:循环解析的富文本内容正 ...

  3. PHP将富文本内容去除各类样式图片等只保留txt文本内容(作用于SEO的description)

    1.从数据库读取富文本内容样式如下: <p style=";text-indent: 0;padding: 0;line-height: 26px"><span ...

  4. html处理富文本内容,避免XSS工具类

    import org.apache.commons.lang3.StringEscapeUtils;import org.jsoup.Jsoup;import org.jsoup.safety.Whi ...

  5. Android WebView 加载富文本内容

    WebView加载数据的方式有两种: 1. webView.loadUrl(data);//加载url 2. webView.loadDataWithBaseURL(null,data, " ...

  6. springmvc 后台实体类接受前端json字符串时,其中一个属性content 接受富文本内容时 标签<p>、<span> 这些标签丢失问题解决

    问题描述: 前端一个字段 <script id="editor" type="text/plain" name="content" s ...

  7. (转)解决NSMutableAttributedString富文本,不同文字大小水平轴对齐问题(默认底部对齐)

    默认是底部对齐,其实对的也不齐, 目标效果:  代码: NSBaselineOffsetAttributeName 基线偏移量: 调整: NSBaselineOffsetAttributeName的值 ...

  8. php将富文本内容图片上传到oss并替换

    /** * php 提取html中图片并替换 */ //要替换的内容 //提取图片路径的src的正则表达式 $match_str = '/(<img([^>]*)\s*src=(\'|\& ...

  9. Angular4 innerHtml呈现富文本内容样式

    import { Pipe, PipeTransform } from "@angular/core"; import { DomSanitizer } from '@angula ...

随机推荐

  1. Centos610-FastDFS系列篇

    最近有使用到FastDFS,考虑到实际在Linux上面配置频率比较低(属于一次性配置),所以本文开始记录相关安装过程,以方便后续使用. 1.单机版安装配置 FastDFS单机模式安装配置 2.集群模式 ...

  2. LeetCode日常小习题

    LeetCode练习题: 1.给定一个大小为 n 的数组,找到其中的众数.众数是指在数组中出现次数大于 ⌊ n/2 ⌋ 的元素. 你可以假设数组是非空的,并且给定的数组总是存在众数. 示例 1: 输入 ...

  3. 吴裕雄--天生自然神经网络与深度学习实战Python+Keras+TensorFlow:LSTM网络层详解及其应用

    from keras.layers import LSTM model = Sequential() model.add(embedding_layer) model.add(LSTM(32)) #当 ...

  4. Git主库私库相关操作操作

    命令1: git remote add 库名称 库地址 说明:写好的代码提交到两个git远端,git remote add是将另一个库地址设置进来 命令2: git fetch 库名称 分支名称 说明 ...

  5. php集成环境、基础标记符

    集成环境:wamp windows apache mysql php lamp linux apache mysql php 标记符: 1.<?php ...... ?> 2.<?p ...

  6. 07-Docker-Image深入理解

    目录 07-Docker-Image深入理解 参考 镜像简介 什么是Docker镜像 什么是Docker容器 镜像结构 镜像特性 镜像层 容器层 镜像存储 07-Docker-Image深入理解 Do ...

  7. python函数1_参数,返回值和嵌套

    函数 将重复的代码,封装到函数,只要使用直接找函数 函数可以增强代码的模块化和提高代码的重复利用率 函数的定义和调用 格式 def 函数名([参数,参数...]): 函数体 定义函数 import r ...

  8. @Value注解的使用

    前提它需要在spring 管理的Bean中有效 (如@Service...) #{...} 此方式可以使用 SpEL 表达式如 #{30-15} ${...} 可以获取配置文件中的值 如 ${jwt. ...

  9. 鸡汤 - Choice is yours

    传送门 https://kamranahmed.info/blog/2018/03/24/choice-is-yours/ Our whole lives are driven by the choi ...

  10. pywinauto教程

    转:pywinauto教程https://blog.csdn.net/weixin_40161673/article/details/83246861 ** 一.环境安装**1.命令行安装方法pip ...