Сжатие div для текста довольно просто. Но если текст переносится на вторую строку (или более) из-за максимальной ширины (в качестве примера), тогда размер DIV не уменьшается до вновь обернутого текста. Он все еще расширяется до точки останова (в данном случае значения max-width), что приводит к значительному размеру поля с правой стороны DIV. Это проблематично при желании центрировать этот DIV так, чтобы обернутый текст казался центрированным. Это не потому, что DIV не сжимается до нескольких строк текста, которые переносятся. Одним из решений является использование оправданного текста, но это не всегда практично, и результаты могут быть отвратительными с большими пробелами между словами.

Я понимаю, что нет никакого решения, чтобы сжать DIV в завернутый текст на чистом CSS. Итак, мой вопрос: как достичь этого с помощью Javascript?

Это jsfiddle иллюстрирует это: jsfiddle. Два слова едва оборачиваются из-за максимальной ширины, однако DIV не сжимается до вновь обернутого текста, оставляя неприятное правое поле. Я хотел бы устранить это и сделать так, чтобы размер DIV изменялся на завернутый текст, предположительно с использованием Javascript (поскольку я не верю, что решение существует в чистом CSS).

.shrunken {text-align: left; display: inline-block; font-size: 24px; background-color: #ddd; max-width: 130px;}

<div class="shrunken">Shrink Shrink</div>
20
onlinespending 30 Янв 2013 в 07:31

3 ответа

Лучший ответ

Это не самое красивое решение, но оно должно сработать. Логика состоит в том, чтобы посчитать длину каждого слова и использовать его, чтобы определить, какая самая длинная строка будет соответствовать, прежде чем ее заставят переносить; затем примените эту ширину к div. Поиграйте здесь: http://jsfiddle.net/uS6cf/50/

Пример HTML ...

<div class="wrapper">
    <div class="shrunken">testing testing</div>
</div>

<div class="wrapper">
    <div class="shrunken fixed">testing testing</div>
</div>

<div class="wrapper">
    <div class="shrunken">testing</div>
</div>

<div class="wrapper">
    <div class="shrunken fixed">testing</div>
</div>

<div class="wrapper">
    <div class="shrunken" >testing 123 testing </div>
</div>

<div class="wrapper">
    <div class="shrunken fixed" >testing 123 testing </div>
</div>

И JavaScript (опираясь на JQuery)

$.fn.fixWidth = function () {
    $(this).each(function () {
        var el = $(this);
        // This function gets the length of some text
        // by adding a span to the container then getting it's length.
        var getLength = function (txt) {
            var span = new $("<span />");
            if (txt == ' ')
                span.html('&nbsp;');
            else
                span.text(txt);
            el.append(span);
            var len = span.width();
            span.remove();
            return len;
        };
        var words = el.text().split(' ');
        var lengthOfSpace = getLength(' ');
        var lengthOfLine = 0;
        var maxElementWidth = el.width();
        var maxLineLengthSoFar = 0;
        for (var i = 0; i < words.length; i++) {
            // Duplicate spaces will create empty entries.
            if (words[i] == '')
                continue;
            // Get the length of the current word
            var curWord = getLength(words[i]);
            // Determine if adding this word to the current line will make it break
            if ((lengthOfLine + (i == 0 ? 0 : lengthOfSpace) + curWord) > maxElementWidth) {
                // If it will, see if the line we've built is the longest so far
                if (lengthOfLine > maxLineLengthSoFar) {
                    maxLineLengthSoFar = lengthOfLine;
                    lengthOfLine = 0;
                }
            }
            else // No break yet, keep building the line
                lengthOfLine += (i == 0 ? 0 : lengthOfSpace) + curWord;
        }
        // If there are no line breaks maxLineLengthSoFar will be 0 still. 
        // In this case we don't actually need to set the width as the container 
        // will already be as small as possible.
        if (maxLineLengthSoFar != 0)
            el.css({ width: maxLineLengthSoFar + "px" });
    });
};

$(function () {
    $(".fixed").fixWidth();
});
6
SynXsiS 30 Янв 2013 в 06:27

Я немного опоздал, но я думаю, что этот код CSS может быть полезен для других пользователей с такой же проблемой:

div {
  width: -moz-min-content;
  width: -webkit-min-content;
  width: min-content;
}
0
BernieSF 14 Авг 2015 в 14:52

Я думаю, это то, о чем вы думаете, это можно сделать в css:

div {
    border: black solid thin;
    max-width: 100px;
    overflow: auto;
}

Вы можете увидеть это здесь: http://jsfiddle.net/5epS4/

0
Jon P 30 Янв 2013 в 03:49