Вмещается ли содержимое в div
Есть див с некоторым текстом внутри
<div style="width:50px; height: 50px; overflow:hidden;"> Длиииииииииииииииинныйй текст </div> Можно ли как-то узнать (через javascript), вмещается в него текст или нет ? |
<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>
|
Как вариант:
<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,
подумал о подобном варианте но отмёл его-как нерабочий если текст в контейнере окажется заключённым в теги-в тот же теги абзаца. есть ли вариант чтобы учесть теги? |
Цитата:
|
яс.спс.но тут же возникает другой вопрос. загоняется туда текст-а как контейнер будет принимать реальные значения -в какую сторону растягиваться? с фикс размером по ширине(об обычном тексте)- ясно то что не влезло по ширине перенесётся на другую строку.и вопрос только в том хватит ли высоты у контейнера.
думал в туже сторону-что можно получить длину текста в пикселах, значения свойств для контейнеров высоту текста, и рассчитать колво строк-соответственно и площадь занимаемую ими.но отмёл его поскольку если будут теги то ничего особо и не выйдет толкового |
<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>
|
кстати не работает он с тегами-то что и думал- и ширину отслеживать нужно для тегов
попробуй замени <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>
но он фаерфоксе кричит что строка меньше чем размеры контейнера код скопирован из этого топика эт я к тому что ширину контейнера нужно фиксировать. |
Цитата:
|
с ними тоже пробовал но там явно задаётся высота текста с этими заголовками больше 50 рх даж <p> задаёт контейнер необходимый больше чем 50
нашел в чём разница-в первом варианте и в последнем в первом явно был задан перенос если по ширине не вмещается как говориться запара+моя невнимательность-не глянул что ты в первом варианте явно задал перенос по ширине |
| Часовой пояс GMT +3, время: 19:33. |