html空格只能一个位置,一个步骤解决 HTML 空格问题~

What

当新建或编辑新闻公告标题的时候，如果在标题文字之间插入多个空格，那么在外面的 div 显示出来只有一个空格。经测试，掘金(juejin.im)的编辑器也存在这个问题。

比如说动态里的专栏文章标题是这样的：

而实际(打开编辑器时)的标题是这样的：

可以看到标题中间的空格被省略掉了。

Why

主要是因为如果 HTML 文档中存在连续多个空格，那么浏览器就只会解析成一个空格。

How

方案一：使用 HTML 转义

可以先使用转义方法将含有连续多个空格的 HTML 段落里的空格转义为然后再使用 innerHTML 插入到元素中，可以实现多个空格的显示效果。

// 转义空格

const addSpace = string => {

return string

.split("")

.map(letter => {

return letter === " " ? " " : letter;

})

.join("");

};

// 简易的 HTML 转义

decodeHTML = html => {

const div = document.createElement("div");

div.innerHTML = html;

return div.innerText;

};

// 在所需要的元素中插入 html

className="title"

dangerouslySetInnerHTML={{

__html: decodeHTML(addSpace(html))

}}

/>;

复制代码

这样做的一个很大的弊端是会把原来的文字信息转换成 html 解析，如果原来的文字中包含

这样的字段会被浏览器解析掉。所以这个方案不推荐使用。

方案二：使用 input 框代替

用 input 代替掉 div 标签，然后在 css 中修改 input 的样式伪装成普通 div。

const content = '标题内容，可能会包含 HTML 标签'

// 原来

{content}

// 修改后

复制代码

less 文件：

.title() {

width: 100%;

color: @titleColor;

border: none;

&:focus {

outline: none;

caret-color: transparent;

}

复制代码

方案三：使用

标签

直接使用 pre 标签即可。

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

所以在这里我们在 CSS 最好设置

font-family: inherit;

另外，可以导致段落断开的标签(例如

等)绝不能包含在

 所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行，但是这种行为在所有浏览器上并不都是一样的。

小结

最后，采用浏览器原生支持的

 标签就可以很愉快地解决界面显示 html 内容的问题啦~

html空格只能一个位置,一个步骤解决 HTML 空格问题~相关推荐

给定一个句子（只包含字母和空格），将句子中的单词位置反转，单词用空格分割, 单词之间只有一个空格，前后没有空格。
给定一个句子(只包含字母和空格), 将句子中的单词位置反转,单词用空格分割, 单词之间只有一个空格,前后没有空格. 比如: (1) "hello xiao mi"-> &qu ...
【原创】如何写一个框架：步骤（下）
[原创]如何写一个框架:步骤(上) 说明:写本文的时候作者完全是把脑子里的东西写了出来,没有参考任何的资料,所以对于每一项内容可能都是不完整的,不能作为一个完整的参考.有一些方法学的东西每个人都有自己 ...
数据库mdf和ldf文件_如何将SQL数据库文件（MDF和LDF）移动到另一个位置
数据库mdf和ldf文件 How often you got to the point that for any reason you don't have enough space on the s ...
只有量子计算机才能产生意识,一个只有量子计算机才能解决的问题
作者:Kevin Hong 翻译:Nothing 审校:山寺小沙弥科学家为了寻找一类只能用量子计算机解决而不能用经典计算机解决的问题花了很多年.现在,他们找到了这样的问题. 在量子计算机研究的早期, ...
算法----- 在排序数组中查找元素的第一个和最后一个位置
题目: 在排序数组中查找元素的第一个和最后一个位置给定一个按照升序排列的整数数组 nums,和一个目标值 target.找出给定目标值在数组中的开始位置和结束位置.你的算法时间复杂度必须是 O(log ...
62. Leetcode 34. 在排序数组中查找元素的第一个和最后一个位置 (二分查找-局部有序)
给定一个按照升序排列的整数数组 nums,和一个目标值 target.找出给定目标值在数组中的开始位置和结束位置.如果数组中不存在目标值 target,返回 [-1, -1].进阶:你可以设计并实现时 ...
python 在排序数组中查找元素的第一个和最后一个位置
在排序数组中查找元素的第一个和最后一个位置给定一个按照升序排列的整数数组 nums,和一个目标值 target.找出给定目标值在数组中的开始位置和结束位置.如果数组中不存在目标值 target,返回 ...
码农节快乐|一个系统，高效解决复杂事件采集-计算-实时触达
PartI: 1024 今天是1024,一个特别的数字,比如某网站内容的解压密码通常都是1024,想求一个种子留言也是1024.1024是属于广大程序猿(又称码农)的节日,在这样一个节日里,各种&qu ...
leetcode题解34-在排序数组中查找元素的第一个和最后一个位置
问题描述给定一个按照升序排列的整数数组 nums,和一个目标值 target.找出给定目标值在数组中的开始位置和结束位置. 如果数组中不存在目标值 target,返回 [-1, -1]. 进阶: 你 ...

html空格只能一个位置,一个步骤解决 HTML 空格问题~

html空格只能一个位置,一个步骤解决 HTML 空格问题~相关推荐

最新文章

热门文章