html如何选中不连续的文本,解决HTML5（富文本内容）连续数字、字母不自动换行...

最近开发了一个与富文本相关的功能，大概描述一下：通过富文本编辑器添加的内容，通过input展示出来(这里用到了 Vue 的 v-html 指令)。

也是巧合，编辑了一个只有数字组成的长文本，等到展示的时候发现，内容超出了(没有自动换行)，另外发现遇到文字就可以换行，如下图所示：

在查资料的过程中发现，不只是数字不会自动换行，还有字母也不会自动换行，造成这种现象的原因是

标签的问题。

解决方法：

接下来介绍一下上面问题的两种解决方法：

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;

}

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

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

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

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

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

1.从数据库读取富文本内容样式如下:

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, " ...

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

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

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

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

Angular4 innerHtml呈现富文本内容样式

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

随机推荐

UE4 4.14 专用服务器没有生成解决办法

简单说一下UE4 专用服务器的生成(网上也有其它版本的但是在4.14.1 上不管用) 1.用源代码编译的引擎(如何获取百度上有很多介绍)创建一个C++ UE4 工程. 2. 在vs 中找到红色这个文件 ...

ado.net C#如何实现数据库增删改查

ado.net数据库访问技术将数据库中的数据,提取到内存中,展示给用户看还可以将内存中的数据写入数据库中去 并不是唯一的数据库访问技术,但是它是最底层的数据库访问技术也就是说是最麻烦但是是最不可缺少的 ...

Java基础之创建窗口——使用卡片布局管理器(TryCardLayout)

控制台程序. 卡片布局管理器会生成一叠组件——一个组件放在另一个组件的上面.添加到容器中的第一个组件在堆栈的顶部,因此是可见的,添加的最后一个组件在堆栈的底部.使用默认的构造函数CardLayout( ...

selenium启动PhantomJS错误

from selenium import webdriverbrowser = webdriver.PhantomJS(executable_path="D:\PhantomJS\phant ...

《Android开发艺术探索》读书笔记 (3) 第3章 View的事件体系

本节和中的第五章Scroll分析有关系,建议先阅读该章的总结 第3章 View的事件体系 3.1 View基本知识 (1)view的层次结构:ViewGroup也是 ...

Swift - 41 - swift1.2新特性(1)

更简洁的if-let import UIKit func attack(name: String, enemyName: String, weapon: String) { print("\ ...

beego任务定时执行，延迟执行

import ( "github.com/astaxie/beego" "github.com/astaxie/beego/toolbox") cronExpr ...

方法join()使用详解

在线程的常见方法一节中,已经接触过join()方法的使用. 在很多情况下,主线程创建并启动子线程,如果子线程中要进行大量的耗时运算,主线程将早于子线程结束.这时,如果主线程想等子线程执行完成才结束,比 ...

loadrunner json中文无法识别问题

http://blog.sina.com.cn/s/blog_6ff7a3b50101awmy.html

GUI的最终选择Tkinter模块练习篇

一.Canvas画布练习 1)简单的绘制图框 from tkinter import * # 构建一个窗口 tk = Tk() # 画布 canvas= Canvas(tk,width=,height ...