复制p和div文本的区别
本帖最后由 马黑黑 于 2024-2-24 08:33 编辑 <br /><br /><style>.tmain { font-size: 18px; }
.tmain p, .main div { margin: 0; padding: 0; }
.tmain textarea { width: 60%; height: 240px; }
</style>
<div class="tmain">
<h2>复制p和div文本的区别</h2>
<p>p标签是HTML中的段落元素，div标签是文档流内容元素，二者作为元素，都可以直接装载文本。拷贝页面里p和div内的文本，得到的效果却是不尽一致，具体表现为，纯p标签内的文本，行与行之间会多出一个空行，div的则没有。如下两个文本块，它们通过CSS设置之后，从外观上看毫无区别，试着分别拷贝其内容到下面的文本框或系统的记事本里看看效果：<br><br></p>
<p>文本一：<br><br></p>
<p>爆竹声中一岁除，</p>
<p>春风送暖入屠苏。</p>
<p>千门万户曈曈日，</p>
<p>总把新桃换旧符。</p>
<p><br><br>文本二：<br><br></p>
<div>爆竹声中一岁除，</div>
<div>春风送暖入屠苏。</div>
<div>千门万户曈曈日，</div>
<div>总把新桃换旧符。</div>
<div style="margin: 20px 0;"><textarea placeholder="粘贴到这里"></textarea></div>
<p>两个文本块中，第一个每一行都是用P标签封装，第二个每一行则用DIV标签加载。拷贝后可以观察到两个文本块各自的行和行之间的明显差别：P标签文本，行与行间都有一个空行，div标签文本行与行间则紧密衔接、没有空行。<br><br></p>
<p>有一个老生常谈的问题，就是，如何快捷删除从网页复制来的文本的空白行。这个问题针对的其实就是P标签，p来自paragraph（段落），主要用做文本容器（比如回帖文字段落），默认有内外边距；div来源于division（区划），可以装载文本，更多用于划分文档流区域（比如帖子父元素），默认内外边距都为0。导致二者的文本复制效果不同则源于各自的功用设计，它们设计的用途本来不一样，只是大家都可以装载文本而已。</p>
</div>
试了一下，真的很明显的区别呢{:4_199:} “有一个老生常谈的问题，就是，如何快捷删除从网页复制来的文本的空白行。”
那么，到底怎样快捷删除这些空白行呢？{:4_204:} 红影 发表于 2024-2-24 09:01
“有一个老生常谈的问题，就是，如何快捷删除从网页复制来的文本的空白行。”
那么，到底怎样快捷删除这 ...
这个百分之九十九点九九九的人都会了呀。实在不会的搜一搜 马黑黑 发表于 2024-2-24 13:04
这个百分之九十九点九九九的人都会了呀。实在不会的搜一搜
哈哈，我成了占比那么小的一份子啊{:4_170:} 在之前着色行号听老师提过这个P标签。。老师已经解决了呀，不过又说连源码空行都干掉了。。等等。。 刚跑去试看了一下，源码空行还存在。完美显示所有代码。。
老师是更换了解决方法是吧。。换成了 这个DIV标签？。。
哈哈，老师真是精益求精，小白一路看着这着色行号被老师改得越来越完美。。。{:4_199:}
优秀还努力，老师你真是我偶像。。 南无月 发表于 2024-2-24 18:52
刚跑去试看了一下，源码空行还存在。完美显示所有代码。。
老师是更换了解决方法是吧。。换成了 这个DIV标 ...
无感升级。上一个，使用拖曳的 clipboardData 对象，监控copy事件，觉得不忠实源码，就又换了一种方式，自定义标签替代P标签。意思就是，没有对剪贴板做任何工作。 红影 发表于 2024-2-24 16:17
哈哈，我成了占比那么小的一份子啊
估计是 马黑黑 发表于 2024-2-24 20:47
无感升级。上一个，使用拖曳的 clipboardData 对象，监控copy事件，觉得不忠实源码，就又换了一种方式， ...
顺手又升一级，一个问题有多种解决方案。。强悍~ 南无月 发表于 2024-2-24 21:01
顺手又升一级，一个问题有多种解决方案。。强悍~
能不用管理剪贴板是最好的
马黑黑 发表于 2024-2-24 21:01
能不用管理剪贴板是最好的
剪贴板的那种步骤感觉有点多。。。你说的时候我还纳闷它怎么实现自动做好几步的。。{:4_173:} 南无月 发表于 2024-2-24 21:11
剪贴板的那种步骤感觉有点多。。。你说的时候我还纳闷它怎么实现自动做好几步的。。
这里面有太多细节 马黑黑 发表于 2024-2-24 21:14
这里面有太多细节
就是一个一个给代码命令，让它执行。。。。感觉JS里要加好多行。。 马黑黑 发表于 2024-2-24 20:52
估计是
好在需要解决空格的时候不算多{:4_173:} 红影 发表于 2024-2-24 23:22
好在需要解决空格的时候不算多
搞原创的不太需要。裁缝写法嘛，要会这功夫 南无月 发表于 2024-2-24 21:24
就是一个一个给代码命令，让它执行。。。。感觉JS里要加好多行。。
一切得益于函数。如果使用函数式编程，那么，虽然代码抽象，代码量却不是太多，很简洁的 马黑黑 发表于 2024-2-25 11:39
搞原创的不太需要。裁缝写法嘛，要会这功夫
裁缝写法，这个是什么啊？ 红影 发表于 2024-2-25 15:09
裁缝写法，这个是什么啊？
就是剪刀加浆糊呀 马黑黑 发表于 2024-2-25 11:44
一切得益于函数。如果使用函数式编程，那么，虽然代码抽象，代码量却不是太多，很简洁的
原来代码并不多呀。。
函数真是高大上啊。。那发明计算机程序的都是神吧。。让函数计算的结果都能如此这般按规则显示出来。。。啧。。
老师你是真神，从此看你的眼神都不一样了。。脑袋里装了一个谜一样的世界。{:4_170:}