Вмещается ли содержимое в div

[kidar2]

Есть див с некоторым текстом внутри

<div style="width:50px; height: 50px; overflow:hidden;">

Длиииииииииииииииинныйй текст

</div>

Можно ли как-то узнать (через javascript), вмещается в него текст или нет ?

[Amphiluke]

<div style="width:50px; height: 50px; overflow:hidden;" id="container">
Длиииииииииииииииинный текст 
</div>
<p><a href="#" onclick="return isThereARoomEnough('container');">is there a room enough?</a></p>

<div style="width:50px; height: 50px; overflow:hidden;" id="container2">
Крткй текст 
</div>
<p><a href="#" onclick="return isThereARoomEnough('container2');">is there a room enough?</a></p>

<script type="text/javascript">
	function isThereARoomEnough(id) {
		var cont = document.getElementById(id);
		var clone = cont.parentNode.insertBefore(cont.cloneNode(true), cont);
		clone.style.overflow = "auto";
		var result = ((clone.scrollWidth > cont.offsetWidth) || (clone.scrollHeight > cont.offsetHeight));
		clone.parentNode.removeChild(clone);
		if (result) {
			alert("There is not enough space");
		} else {
			alert("The container is roomy enough")
		}
		return false;
	}
</script>

[monolithed]

Как вариант:

<script type="text/javascript">
window.onload = function(){
    var div = document.getElementById('div'),
        computed = parseInt(window.getComputedStyle ? getComputedStyle(div, null).height : div.currentStyle.height);
        div.style.height = '';
    alert(computed < div.offsetHeight ? 'больше!' : 'меньше?');   
};
</script>

<div id="div" style="
      position: relative;
      white-space: pre-wrap; /* W3C */
      white-space: -moz-pre-wrap; /* Mozilla  */
      white-space: -o-pre-wrap; /* Opera */
      word-wrap: break-word; /* IE5.5+ */
      width: 50px;
      height: 50px;">
      ******************************************
</div>

[dmitriymar]

monolithed,
подумал о подобном варианте но отмёл его-как нерабочий если текст в контейнере окажется заключённым в теги-в тот же теги абзаца.
есть ли вариант чтобы учесть теги?

[monolithed]

есть ли вариант чтобы учесть теги?

если я правильно понял, то разницы особой нет, что будет содержаться в родительском элементе, т.к. мы получаем фиксированные значения элемента, затем их обнуляем, чтобы получить фактические для булевого сравнения...

[dmitriymar]

яс.спс.но тут же возникает другой вопрос. загоняется туда текст-а как контейнер будет принимать реальные значения -в какую сторону растягиваться? с фикс размером по ширине(об обычном тексте)- ясно то что не влезло по ширине перенесётся на другую строку.и вопрос только в том хватит ли высоты у контейнера.
думал в туже сторону-что можно получить длину текста в пикселах, значения свойств для контейнеров высоту текста, и рассчитать колво строк-соответственно и площадь занимаемую ими.но отмёл его поскольку если будут теги то ничего особо и не выйдет толкового

[monolithed]

<script type="text/javascript">
window.onload = function(){
    var div = document.getElementById('div'),
        computed = parseInt(window.getComputedStyle ? getComputedStyle(div, null).height : div.currentStyle.height);
        div.style.height = '';
    alert(computed < div.offsetHeight ? 'больше!' : 'меньше?');   
};
</script>

<div id="div" style="
      position: relative;
      overflow: hidden;
      width: 50px;
      height: 50px;">
      *!*
      <p style="height: 100px;">******************************************</p>
*/!*
</div>

[dmitriymar]

кстати не работает он с тегами-то что и думал- и ширину отслеживать нужно для тегов
попробуй замени
<p style="height: 100px;">****************************************** </p>
на
<h10>******************************************</h10>
да и просто с текстом вне площадки сайта не работает

вот код какой пробую-кричит обратное с данными с топика

<script type="text/javascript">
window.onload = function(){
    var div = document.getElementById('div'),
        computed = parseInt(window.getComputedStyle ? getComputedStyle(div, null).height : div.currentStyle.height);
        div.style.height = '';
    alert(computed < div.offsetHeight ? 'больше!' : 'меньше?');  
};
</script>
 
<div id="div" style="
      position: relative;
      overflow: hidden;
      width: 50px;
      height: 50px;">
      *************************************************************************
</div>

но он фаерфоксе кричит что строка меньше чем размеры контейнера
код скопирован из этого топика
эт я к тому что ширину контейнера нужно фиксировать.

[monolithed]

кстати не работает он-то что и думал-что ширину фиксировать нужно.

h10 нет, c h1-6 все работает

[dmitriymar]

с ними тоже пробовал но там явно задаётся высота текста с этими заголовками больше 50 рх даж <p> задаёт контейнер необходимый больше чем 50
нашел в чём разница-в первом варианте и в последнем
в первом явно был задан перенос если по ширине не вмещается
как говориться запара+моя невнимательность-не глянул что ты в первом варианте явно задал перенос по ширине