Как получить максимально возможную ширину деления?

Question

Мне нужно знать, как можно получить максимально возможную ширину деления.Как правило, ширина <div> ограничена его родителем, что означает, что он не может быть больше определенной величины.Как рассчитать определенную сумму?

Мне нужно это вычислить, если текст внутри текущего <div> переполнился (поскольку единственный способ обнаружить переполнение текста - это сравнить его текущую ширину с текущейclientWidth).

Спасибо!

Answer 1

Несколько способов сделать это, давайте начнем с вашего div ...

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

... а затем someJavascript:

//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

Вы можете добавить 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>

Answer 3

Если вы хотите, чтобы div был шириной 100% без пробелов между краями, вы можете попробовать добавить этот стиль CSS simpel к div:

Answer 4

Спасибо, Стив!

Ваши предложения были очень полезны.Хотя ни один из них не помог мне (возможно, я не очень хорошо объяснил свою ситуацию), но, используя ваши подсказки, я смог найти способ обнаружить переполнение текста:

/* 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
}