Question

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

________________________
|_________div__________| [image]

我正面临着自动换行的问题。一旦内部文本变得比文本长。它包裹着。但由于自动换行在换行前将div拉到最大尺寸，因此文本和图像之间会有一些空白区域。

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

现在这种行为不利。我怎样才能让Div占用与文本一样多的空间。

，例如

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

Answer 1

尝试删除div的任何声明的宽度（或将其设置为width: auto）。

Answer 2

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

查看实际操作：（位于JS Bin）

!function($){
    $.fn.calcMaxWidth = function(maxWidth) {
        maxWidth = !maxWidth || isNaN(maxWidth) ? 200 : maxWidth;

        return this.each(function() {
            var i,y,
                tempObject,
                thisObject = this,
                $this = $(this),
                $contents = $this.contents(),
                tempContents = [],
                tempMaxWidth = 0;

            $contents.each(function() {
                tempContents.push(this);
            });

            $this.empty();

            while(tempContents.length) {

                tempObject = tempContents.shift();

                if ( tempObject.nodeName == "#text" ) {
                    tempObject = $(tempObject).text().split(" ");
                    for ( i = tempObject.length; i>0; i-- ) {
                        tempContents.unshift(tempObject[i-1] + " ");
                    }

                    continue;
                }

                $this.append( tempObject );


                if ( $this.width() < maxWidth && $this.width() > tempMaxWidth ) 
                    tempMaxWidth = $this.width(); 
                else {
                    $this.empty();
                }
            }

            $this
                .css("width", tempMaxWidth || maxWidth)
                .append($contents);
        });
    }
}(jQuery);

用法：

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

我的DOM示例：

<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;
}

LIVE DEMO

...

安德烈亚斯

div word-wrap造型

2 个答案:

LIVE DEMO