3

见小提琴

html

<div class="e" style="left:5px;top:5px;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbb</div>

<div class="e" style="left:5px;top:100px;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>​

css

.e {
    font-size: 10px;
    font-family: arial;
    background-color: yellow;
    position: absolute;
    max-width: 300px;
}

您会注意到第二个 div 完全适合内容的大小，但在第一个 div 上，a 和 b 的右侧有一堆空白空间。这是因为 div 达到了 300px 的最大宽度，然后将 b 包裹到第二行。包装很好，但我希望 div 然后缩小到 a 的宽度，这样右边就没有空白了。

有可能让它做到这一点吗？

在 Chrome 和 FF 中测试。​</p>

4

4 回答 4

2

您可能会避免处理宽度，因为我的理解是您正在寻找一种以令人满意的方式打破文本的方法。

使用word-break: break-all, 在文本碰到容器边缘时换行。

例子：

参考：

于 2012-06-22T21:13:40.537 回答
1

要将 div（或任何元素）缩小到其文本内容的大小，您可以使用 JavaScript 获取range包含其内容的 a 并使用以下方法获取范围的大小range.getBoundingClientRect()：

function sizeElementToContents(el) {
    var range = document.createRange();
    range.selectNodeContents(el);
    var textRect = range.getBoundingClientRect();
    el.style.width = textRect.width + "px";
}

但是，当然，这只适用于现代浏览器。IE8 和 IE7 有不同的方法来处理范围。实际上，IE7 会自动max-width按照您想要的方式处理，但是当我们的 IE8 代码运行以重新调整 IE7 上的 div 大小时，它会将 div 缩小为 0。为避免编写特定浏览器版本的代码，此代码在 IE7 上运行并且IE8，但包含一些额外的逻辑，以便它适用于两个浏览器版本：

function sizeElementToContents(el) {
    var range, width;
    if (document.createRange) {
        range = document.createRange();
        range.selectNodeContents(el);
        width = range.getBoundingClientRect().width;
    }
    else {
        range = document.body.createTextRange();
        range.moveToElementText(el);
        range.moveStart("character", 1);
        width = range.boundingWidth;
        var height = range.boundingHeight;
        range.collapse();
        range.moveEnd("character", 1);
        if (range.boundingHeight == height) {
            return; // text doesn't wrap, so don't resize
        }
    }
    el.style.width = width + "px";
}

工作演示：http: //jsfiddle.net/gilly3/HZRFb/

于 2012-07-06T21:39:19.133 回答
1

从Biziclop的解决方案分叉：

.e {
    font-size: 10px;
    font-family: arial;
    background-color: yellow;
    position: absolute;
    max-width: 300px;
    margin-right:100%;
}

链接到小提琴。

于 2012-06-22T21:31:10.247 回答
0

不要问我为什么它会起作用，它可能明天就坏了，但是添加一些极端的margin-right似乎可以解决问题：

.e {
    margin-right: 9999px;
}

见http://jsfiddle.net/2cTga/1/

于 2012-06-22T21:09:44.203 回答