Контроль изменения высоты любого из span, как критерий добавки колонок в div.wrp, либо еще каких-нибудь действий
(Закидываем в один из span контент больше максимально-допустимой высоты
<!DOCTYPE>
<html>
<head>
</head>
<body>
<style>
html, body, div{height: 100%;margin:0;padding:0;}
.wrp span{
margin: 0;
vertical-align: top;
display: inline-block;
white-space:pre-wrap;
word-wrap: break-word;
min-height: 200px;
max-height: 202px;
max-width:200px;
border: 1px solid red;
}
.wrp{
position:absolute;
border: 1px solid blue;
white-space:nowrap;
padding:0;
height: auto;
}
</style>
<div class=wrp><iframe name="frame" width="88" height="100%" style="margin:0;position:absolute;border:green solid 1px;/*z-index:-1*/"></iframe>
<span>вввввввввввввввввввввввввввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв
ввввввввввввввввввввввввв</span>
<span>вввввввввввввввввввввввввввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв
ввввввввввввввввввввввввв</span>
<span id=third></span>
<span id=fourth></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<script type="text" id="scr00">
ввввввввввввввввввввввввв ввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв
ввввввввввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв
ввввввввввввввввввввввввв
</script>
<script type="text/javascript">
setTimeout(function(){ // Отработка задержки фрейма (для FF и ИЕ)
var timerResize='first';
frame.onresize = function(){ // frame, - Имя фрейма (name=frame) - cм начало Кода;
if(timerResize!=='first')clearTimeout(timerResize);
timerResize=setTimeout( function(){ // Задержка для очистки чрезмерных срабатываний;
alert('Высота div class=wrp изменена.'); // Тело обработки события «onresize»;
},20) // Параметр 20(ms) , - зависит от нужной скорости реагирования на повторные события;
// актуально при плавных изменениях размера элемента,
// либо почти одновременное изменением размера несколькими разными процессами.
}
},200);
setTimeout(function(){ //Докидываем контент в третий span
document.getElementById("third").innerHTML='вввввввввввввввввввввввввввввввввввввввввв\
вввввввввввввввввввввввввввввввввввввввввв\
вввввввввввввввввввввввввввввввввввввввввв\
вввввввввввввввввввввввввввввввввввввввввв\
ввввввввввввввввввввввввв\
ввввввввввввввввввввввввв';
},3000);
setTimeout(function(){ //Докидываем контент в четвёртый span
document.getElementById("fourth").innerHTML=document.getElementById("scr00").innerHTML;
},7000);
</script>
</body>
</html>