Javascript 正在寻找一种在网页上围绕流动文本呈现大纲的方法

据我所知，这是不可能的

我想画一个轮廓周围的文字是流动周围的浮动图片在网页上。任何CSS或Javascript技巧，可以帮助这将不胜感激

可怕的模型：

编辑：

此链接指向Aloha编辑器的演示，可让您了解大纲的目的：

为什么？ 在我正在开发的CMS中，用户可以在网站前端的contentEditable div中编辑信息。在上面的情况下，在整个div周围有一个轮廓会给用户造成混乱，因为他们无法编辑那个黑色块

目前，我已经添加了一个类来创建一个关于可编辑内容的大纲。这在一开始效果很好，但当我对格式有了一点创意（例如，在一个div的底部没有空白，内容被包装在一个带有提纲的div中）之后，事情就开始变得不好和丑陋。如果有什么方法可以把div的文本用一个间隔很好的提纲包装起来，我可以在网站上始终如一地应用它，这会让事情变得容易得多。另外，我在上面概述的内容结构方面陷入僵局

---

除了向用户传达可在页面上编辑的文本的大纲外，我还愿意接受其他想法。我正在尝试在contentEditables中的内部

元素上设置背景色，但它似乎没有大纲那么好

这可能会有所帮助，尽管我认为它对于一般用途来说可能有点过于做作，因为我试图让它看起来“完全像”你的模型

CSS:

#content {
    border: 3px solid orange;
    font: 12px sans-serif;
    width: 500px
}
#content .imgContainer {
    padding: 0 9px 9px 0;
    float: left;
    margin: -3px 9px 9px -3px;
    border-right: 3px solid orange;
    border-bottom: 3px solid orange;
    background: #fff
}

<div id="content">
    <div class="imgContainer"><img src="http://dummyimage.com/220x204/f0c/fff" /></div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus  diam porttitor dui eleifend egestas. Nullam eros purus, dapibus ut  ultrices lacinia, ornare id ante. Suspendisse arcu mauris, fermentum  quis vehicula non, posuere et urna. Suspendisse hendrerit nulla quis  metus condimentum ultricies. Fusce vel egestas tortor. Sed eleifend  tincidunt eleifend. Aliquam erat volutpat. Ut hendrerit, metus nec  posuere dignissim, mauris felis pharetra erat, at elementum eros velit  id libero. Mauris egestas, felis in semper vestibulum, eros felis  lobortis dui, sed consectetur justo urna volutpat urna. Vestibulum  vestibulum congue magna id pharetra. Aliquam venenatis consectetur  rhoncus. Etiam convallis laoreet mauris id rhoncus. Nullam tincidunt  nunc sit amet turpis tincidunt quis hendrerit mauris porttitor. Cum  sociis natoque penatibus et magnis dis parturient montes, nascetur  ridiculus mus.
</div>

HTML:

#content {
    border: 3px solid orange;
    font: 12px sans-serif;
    width: 500px
}
#content .imgContainer {
    padding: 0 9px 9px 0;
    float: left;
    margin: -3px 9px 9px -3px;
    border-right: 3px solid orange;
    border-bottom: 3px solid orange;
    background: #fff
}

<div id="content">
    <div class="imgContainer"><img src="http://dummyimage.com/220x204/f0c/fff" /></div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus  diam porttitor dui eleifend egestas. Nullam eros purus, dapibus ut  ultrices lacinia, ornare id ante. Suspendisse arcu mauris, fermentum  quis vehicula non, posuere et urna. Suspendisse hendrerit nulla quis  metus condimentum ultricies. Fusce vel egestas tortor. Sed eleifend  tincidunt eleifend. Aliquam erat volutpat. Ut hendrerit, metus nec  posuere dignissim, mauris felis pharetra erat, at elementum eros velit  id libero. Mauris egestas, felis in semper vestibulum, eros felis  lobortis dui, sed consectetur justo urna volutpat urna. Vestibulum  vestibulum congue magna id pharetra. Aliquam venenatis consectetur  rhoncus. Etiam convallis laoreet mauris id rhoncus. Nullam tincidunt  nunc sit amet turpis tincidunt quis hendrerit mauris porttitor. Cum  sociis natoque penatibus et magnis dis parturient montes, nascetur  ridiculus mus.
</div>

Lorem ipsum dolor sit amet，是一位杰出的献身者。Nam dapibus diam porttitor dui eleifend egestas。这是一个很好的例子。毛里斯弧悬液，车辆发酵液，波苏尔和乌尔纳。亨德雷特·努拉·奎斯·梅特斯调味品ultricies Suspendisse hendrerit nulla quis。这是一种侵权行为。塞德·埃利芬德·蒂奇登·埃利芬德。阿利奎姆·埃拉特·帕特。但亨德雷特、梅特斯·内克·波苏尔·德格尼西姆、莫里斯·费利斯·法雷特拉·埃拉特，都是自由女神。毛里斯·埃格斯塔斯（Mauris egestas）、塞姆佩尔前庭的猫咪、厄洛斯·猫咪酒后驾车（eros felis lobortis dui）和乌尔纳（justo urna-Pat urna）。大前庭大前庭。罗氏威尼斯阿利夸。莱奥里特·莫里斯·德朗库斯（laoreet mauris id rhoncus）。这是一个很好的例子。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。

嗯。。。一切都可以用Javascript完成！ 在我的例子中，我有一种疯狂的解决方案，使用jQuery。它适用于你的模型，稍加调整，它可以在不同的情况下工作，只需调整它

其思想是使用jQuery在图像周围插入边框并隐藏不需要的边框。根据图像大小动态计算宽度、高度和位置

---

享受：

这绝对实现了我制作的模型，它给了我一些好主意，让我知道如何使用一些JavaScript逻辑来处理这种情况。不过，如果能找到更灵活一点的东西，那就太好了。例如，一些可以处理使用内容较少的情况的东西：我不确定，但我认为您需要一些智能JavaScript以更灵活的方式解决这个问题。我会考虑一下。我对它做了一些修改，以处理文本长度的变化。这是概念的快速证明：