Question

我需要知道如何获得div的最大可能宽度。通常，<div>的宽度受其父级的限制，这意味着它不能大于某个数量。如何计算一定金额？

我需要这个来计算当前<div>内的文本是否溢出，（因为检测文本溢出的唯一方法是将它的当前宽度与当前clientWidth进行比较）。

谢谢！

Answer 1

有几种方法，让我们从你的div开始......

<div id='mr_cleaver'>
  <div id='beaver'>Blah</div>
</div>

...然后是一些JavaScript：

//Method One: Find the width of the div's parent
var max_beaver_width = $('mr_cleaver').offsetWidth

//Method Two: Max out the div, find length, return to original size.
var beaver_width = $('beaver').offsetWidth;
$('beaver').style.width = "100%";
var max_beaver_width = $('beaver').offsetWidth;
$('beaver').style.width = beaver_width + 'px';

//Method Three: Check for overflow
$('beaver').scrollWidth > $('beaver').offsetWidth ? alert("Over") : alert("Within")

Answer 2

谢谢史蒂夫！

您的建议非常有用。虽然它们都没有为我工作（可能我没有很好地解释我的情况），但使用你的提示，我可以找到一种方法来检测文本溢出：

/* specifying the height of 'beaver'*/
var font_size= $('beaver').css("font-size");
font_size = parseInt(font_size.replace(/[a-z]*/gi,''));
var maxHeight = font_size + 4; // 4 is to make sure that the font fits in the maxHeight

/*now calculate current height*/
$('beaver').style.overflow-y:visible;
$('beaver').style.overflow-x:hidden;
var cuurentHeight = $('beaver').clientHeigth;

/* check whether overflow is occured*/
if(cuurentHeight > maxHeight){
    //overflow has been occured
}

Answer 3

如果你希望div的宽度为100％而边缘之间没有空格，你可以尝试将这个simpel CSS样式添加到div：

<style type="text/css">
  #FullWidthDiv {        // EDIT
    position: absolute; // If you use 'fixed' as position, then the div
    display: block;     // won't become smaller when the screen is at is smallest.
float: left;        // The fixed position is good when you for example want the
width: 100%;        // menu to stay in place.
background-color: #06F;
height: auto;
left: 0px;
top: 0px
}
</style>

<html>
<body>
<div id="FullWidthDiv"></div>
</body>
</html>

Answer 4

您可以将div附加到父元素中以进行测量。

var test = document.querySelector('#test');

var div = document.createElement('div');
div.style.width = '10000px';
test.appendChild(div);
var maxWidth = test.offsetWidth;
test.removeChild(div);
alert(maxWidth);

#test {
  display: inline-block;
  max-width: 100px;
}

<div id="test"></div>

如何获得div的最大可能宽度？

4 个答案: