25

divを一部のテキストにシュリンクラップするのは非常に簡単です。ただし、最大幅（例として）が原因でテキストが2行目（またはそれ以上）に折り返される場合、DIVのサイズは新しく折り返されているテキストに縮小されません。それでもブレークポイント（この場合は最大幅の値）まで拡張され、DIVの右側にかなりのマージンが生じます。これは、ラップされたテキストが中央に表示されるようにこのDIVを中央に配置する場合に問題になります。DIVが折り返される複数行のテキストに縮小されないためではありません。解決策の1つは、正当化されたテキストを使用することですが、それが常に実用的であるとは限らず、単語間に大きなギャップがあると結果が恐ろしいものになる可能性があります。

DIVを純粋なCSSでラップされたテキストに縮小する解決策がないことを理解しています。だから私の質問は、Javascriptでこれをどのように達成するのでしょうか？

このjsfiddleはそれを示しています：jsfiddle。2つの単語は、最大幅のためにかろうじて折り返されますが、DIVは新しく折り返されたテキストに縮小されず、厄介な右側の余白が残ります。これを排除し、おそらくJavascriptを使用してDIVをラップされたテキストにサイズ変更させたいと思います（純粋なCSSに解決策が存在するとは思わないため）。

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

<div class="shrunken">Shrink Shrink</div>
4

4 に答える 4

8

これは最も美しい解決策ではありませんが、うまくいくはずです。論理は、各単語の長さを数え、それを使用して、折り返す前に収まる最長の行を計算することです。次に、その幅を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>

そしてjavacript（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();
});
于 2013-01-30T06:27:00.780 に答える
5

少し遅れましたが、このCSSコードは、同じ問題を抱えている他のユーザーにも役立つと思います。

div {
  width: -moz-min-content;
  width: -webkit-min-content;
  width: min-content;
}
于 2015-08-14T14:52:36.157 に答える
-1

私はこれがあなたが考えていることだと思います、それはcssで行うことができます：

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

あなたはここでそれを見ることができます：http：//jsfiddle.net/5epS4/

于 2013-01-30T03:49:36.440 に答える
-2

これを試してください： https ：//jsfiddle.net/9snc5gfx/1/

.shrunken {
   width: min-content;
   word-break: normal;
}
于 2021-04-12T12:20:08.037 に答える