Javascript div换行字样式

我的webapp中有一个样式问题。我有一个相邻图像的div

________________________
|_________div__________| [image]

我面临着一个单词包装的问题。一旦内部的文本变得比文本长。它绕着我转。但是由于word wrapping在包装之前将div拉伸到其最大大小，因此文本和图像之间有一点空白

 ____________________
| This is stack      |[image]
|_overflow___________|

现在这种行为是不好的。我怎样才能让Div只占文本的空间呢

比如

 ______________
| This is stack|[image]
|_overflow_____|

---

尝试删除div的任何声明宽度（或将其设置为

width:auto

）。

我编写了一个jQuery插件来实现这一点。这不是最稳定的解决方案，但对于较小的解决方案，我认为它会起作用：

查看它的实际操作：（at）

我的DOM示例：

$("div.t").calcMaxWidth(200);

<div class="l t">
    This text is so long that we have to break it, The max width is <code>200px</code>.
    <span>a span tag</span>
    <a href="http://goggle.com">A link...</a>
    <br />
    Using jQuery
</div>
<img src="" />

<div style="clear:both"></div>

<div class="l">
    This text is so long that we have to break it, The max width is <code>200px</code>.
    <span>a span tag</span>
    <a href="http://goggle.com">A link...</a>
    <br />
    Using CSS
</div>
<img src="" />

div.l {
    float:left;
    background:#fda;
    max-width:200px;
    overflow:hidden;
}
img {
    overflow:hidden;
    width:100px;
    height:100px;
}

和样式：

$("div.t").calcMaxWidth(200);

<div class="l t">
    This text is so long that we have to break it, The max width is <code>200px</code>.
    <span>a span tag</span>
    <a href="http://goggle.com">A link...</a>
    <br />
    Using jQuery
</div>
<img src="" />

<div style="clear:both"></div>

<div class="l">
    This text is so long that we have to break it, The max width is <code>200px</code>.
    <span>a span tag</span>
    <a href="http://goggle.com">A link...</a>
    <br />
    Using CSS
</div>
<img src="" />

div.l {
    float:left;
    background:#fda;
    max-width:200px;
    overflow:hidden;
}
img {
    overflow:hidden;
    width:100px;
    height:100px;
}

---

---

安德烈亚斯

我很好奇这是否可能——我不能让它发生请发布你的CSS。