Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.02.2011, 10:35
Аспирант
Отправить личное сообщение для kidar2 Посмотреть профиль Найти все сообщения от kidar2
 
Регистрация: 05.01.2010
Сообщений: 64

Вмещается ли содержимое в div
Есть див с некоторым текстом внутри

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

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

</div>

Можно ли как-то узнать (через javascript), вмещается в него текст или нет ?
Ответить с цитированием
  #2 (permalink)  
Старый 06.02.2011, 13:05
Аватар для Amphiluke
   ☽
Отправить личное сообщение для Amphiluke Посмотреть профиль Найти все сообщения от Amphiluke
 
Регистрация: 07.01.2011
Сообщений: 254

<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>
Ответить с цитированием
  #3 (permalink)  
Старый 06.02.2011, 14:28
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Как вариант:
<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>

Последний раз редактировалось monolithed, 06.02.2011 в 17:02.
Ответить с цитированием
  #4 (permalink)  
Старый 06.02.2011, 20:00
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,589

monolithed,
подумал о подобном варианте но отмёл его-как нерабочий если текст в контейнере окажется заключённым в теги-в тот же теги абзаца.
есть ли вариант чтобы учесть теги?
Ответить с цитированием
  #5 (permalink)  
Старый 06.02.2011, 23:07
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Сообщение от dmitriymar
есть ли вариант чтобы учесть теги?
если я правильно понял, то разницы особой нет, что будет содержаться в родительском элементе, т.к. мы получаем фиксированные значения элемента, затем их обнуляем, чтобы получить фактические для булевого сравнения...
Ответить с цитированием
  #6 (permalink)  
Старый 07.02.2011, 18:20
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,589

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

Последний раз редактировалось dmitriymar, 07.02.2011 в 18:34.
Ответить с цитированием
  #7 (permalink)  
Старый 07.02.2011, 18:51
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

<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>
Ответить с цитированием
  #8 (permalink)  
Старый 07.02.2011, 19:32
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,589

кстати не работает он с тегами-то что и думал- и ширину отслеживать нужно для тегов
попробуй замени
<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>

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

Последний раз редактировалось dmitriymar, 07.02.2011 в 20:03.
Ответить с цитированием
  #9 (permalink)  
Старый 07.02.2011, 19:47
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Сообщение от dmitriymar
кстати не работает он-то что и думал-что ширину фиксировать нужно.
h10 нет, c h1-6 все работает
Ответить с цитированием
  #10 (permalink)  
Старый 07.02.2011, 20:09
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,589

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

Последний раз редактировалось dmitriymar, 07.02.2011 в 20:20.
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема с load в div и импортом стороннего кода с помощью javascript 1quick1 Events/DOM/Window 9 04.02.2011 13:16
По клику на ссылку меняем содержимое внутри блока goooooch Общие вопросы Javascript 6 26.01.2011 15:25
animate, всплывающий div box сделать по центру zero_mod jQuery 1 27.10.2010 00:23
Появление блоков div в зависимости от radio Oracool Events/DOM/Window 1 04.12.2009 18:39
Как убрать выделение в Опере у div, получившего фокус ? spa_2002 Opera, Safari и др. 5 03.09.2009 10:42