将DIV缩小到包裹成最大宽度的文本?

将DIV缩小到包裹成最大宽度的文本?,第1张

将DIV缩小到包裹成最大宽度的文本?

这不是最漂亮的解决方案,但应该可以解决问题。逻辑是计算每个单词的长度,并用它来计算出在被迫换行之前最长的一行将适合的行;然后将该宽度应用于div。
范例html …

<div >    <div >testing testing</div></div><div >    <div >testing testing</div></div><div >    <div >testing</div></div><div >    <div >testing</div></div><div >    <div  >testing 123 testing </div></div><div >    <div  >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();});


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/5641223.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-12-16
下一篇 2022-12-16

发表评论

登录后才能评论

评论列表(0条)

保存