复制flex布局内的文字出现的多余换行问题
今天啊 碰到一个比较无奈的问题
我这里准备了一个demo
这是3个flex（布局的容器）
现在呢就是这样的
问题是什么呢？ 大家我先复制它
ctrl c然后呢我们粘贴一下 （macOS：command + c ）
大家看
他在不该换行的地方都是换行的
后来啊经过我一番的学习（搜索引擎）啊 （现学现卖啦）
我发现原因是啊因为我们用了flex
所以呢他这里边的元素都是block布局
大家看
display: block
那为什么block会有这个问题呢
我们再来看一下这个例子
我在下边还准备了一个Div
就是普通的div不是flex布局哈
这个是一会准备用绝对定位的啊
我们先不管它没有它也是一样的哈
然后呢像这样写两个姓名李四
大家知道div默认都是 (display等于) block对吧
我们来看一下效果
就是这样的
因为block嘛！所以它各自占一行
这个没问题我们复制它
肯定是各自一行的
但是呢
如果我们把李四用绝对定位给他
调到姓名后边呢
我们再复制
看上去他在一起
但是呢他还是会换行
所以呢我们可以理解为对于block元素
我们如果多选的话
在复制的时候他就会换行
那再回到上面这个问题
我们也没办法把这个display
block给它改掉
关于这个问题呢
我在网上也找到了一些线索
我们先来看这个Webkit的issues
他在2018年就有人提这个问题
最后在2019年的时候呢
得到了一个回复
说啊这是一个issue
然后呢
我们可以在这个复制粘贴的代码里
去修改
并且啊
他们目前也没有打算修复这个问题
这是webkit的！我们再来看chromium内核了
2015年就有人提了这个问题
一直到今年了他还有这个问题
并且呢官方定义为这是一个feature
看样子近期也不打算修复（支持）它
所以啊我就说这个问题比较无奈
难道我们这种情况就不能用flex了吗
后来啊
还是这个issues给了我一个灵感
他说
可以在复制粘贴的代码里去修复它
所以呢我就写了一个组件
在这里叫copy clear br
原理啊就是我们在这个姓名和张三
中间写一个特殊字符(串）（宽高为0）
然后呢我们在浏览器复制事件里边
去把这个特殊字符识别到这个位置
把它两边的换行都去掉
代码呢就是这样很简单
回头我把它放在demo里哈
然后用的时候呢
特别简单
我们就把它
放在
任何一个地方
只要我们想在复制的时候去掉换行
就可以在这加一个这个
比如年龄
这也加上
好我们再来一遍
选中
复制然后呢
粘贴大概这就可以了
包括没有flex的也是可以的
比如说我在这这是正常的布局
现在啊我把这绝对定位去掉
然后呢我在这加一个这个组件
好我们再选中复制
粘贴 大家看 也没问题
最后更新于