围绕固定分隔线环绕文本答案

【问题标题】：Wrap text around a stationary divider围绕固定分隔线环绕文本
【发布时间】：2014-06-06 00:38:21
【问题描述】：

有没有办法创建一个即使网页上的内容发生变化也不会移动的html元素，它保持在相同的位置并且其余内容环绕它？

我想创建一条横跨动态网页的长线。当有人向网页添加更多内容时，该行应保持完整，不会像砖墙一样移动，其余内容会绕着它移动或跳过它。

视觉示例：

content content content content content contentcontent content
content content content content content contentcontent content co
--------------------------------------------------------------------(long line)
ntent content contentcontent contentcontent contentcontent content
content contentcontent contentcontent contentcontent contentcontent

注意第 2 行的文本如何绕过长行以在该行之后继续。

希望它有意义，

发现了这个问题，这或多或少正是我想要的jQuery Split content based on height

但问题没有得到回答。

【问题讨论】：

如果我可以问，这条线的目的是什么？
那个例子不正确。我想要一条分割线在该线所在的固定位置将网页分成两半。将被拆分的内容都是文本，所以如果页面上半部分变得太多，我希望它一直流到该行之后。
什么会导致文本改变？
你看过“float”吗？
目的是直观地向用户展示他的内容将填满多少页。假设我有足够的内容来填充 5 个页面的文本，将有足够的行在该页面上将内容拆分 5 次。有点像ms word，填满页面后跳转到新页面的方式。

标签： javascript jquery html css

【解决方案1】：

.fencepost {float: left; width: 0.1px; height: 100px;}
.gate {float: left; clear: left; width: 99.9%; height: 30px;}

http://jsfiddle.net/isherwood/P6Z3p/

【讨论】：

这是一个聪明的小技巧 :)
聪明。这会在左侧创建一个高度为 100px 的非常窄的垂直元素，其下方放置一个宽条间距条，然后文本正好适合这两个 div。
这是一个自动添加分页符的修改：jsfiddle.net/foxbunny/KbXzS
就是这样！你解决了这个问题，几乎把它的头撕掉了！

【解决方案2】：

我认为 CSS 不可能。您可能会为每个“页面”设置字符限制，当您使用 javascript 在页面上检测到超出字符限制时，您会强制用户将注意力集中在新的“页面”上。

线条的样式就无关紧要了——它只是一个普通的 HTML 元素宽度 100% 或其他东西，重要的是强制用户拆分

【讨论】：

我在很久以前尝试过这条路线，但如果用户添加了图片，它就不准确了。我发现了这个，这或多或少正是我想要的stackoverflow.com/questions/7032639/…
但那是垂直列，而不是分页？
如果我在每个垂直列的底部添加一个边框，我会得到相同的结果。 :)