3

see fiddle

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

you will notice the 2nd div fits the size of the content exactly, but on the first div there's a bunch of empty space to the right of the a's and b's. This is because the div hit its max width of 300px and then wrapped the b's to a 2nd line. The wrapping is good, but then I would expect the div to then shrink back down to the width of the a's so that there's no empty space to the right.

Is it possible to get it to do this?

Tested in Chrome and FF. ​</p>

4

4 に答える 4

2

you may avoid handling the width, as my understanding is that you're looking for a way to break the text in a satisfying manner.

use word-break: break-all, to wrap the text whenever it hits the container's edge.

Example:

Reference:

于 2012-06-22T21:13:40.537 に答える
1

Forking from Biziclop's solution:

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

Link to the Fiddle.

于 2012-06-22T21:31:10.247 に答える
1

To shrink a div (or any element) to the size of its text content, you can use JavaScript to get a range that contains its contents and get the size of the range using range.getBoundingClientRect():

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

But, of course, that only works with Modern browsers. IE8 and IE7 have different methods for working with ranges. Actually, IE7 automatically handles max-width the way you want it to, but when our IE8 code is run to re-size the divs on IE7, it shrinks the divs to 0. To avoid writing code for specific browser versions, this code runs on IE7 and IE8, but includes a little extra logic so that it works on both browser versions:

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

Working demo: http://jsfiddle.net/gilly3/HZRFb/

于 2012-07-06T21:39:19.133 に答える
0

Don't ask me why it works, it might break tomorrow, but adding some extreme margin-right seems to solve the problem:

.e {
    margin-right: 9999px;
}

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

于 2012-06-22T21:09:44.203 に答える