JQuery die Anzahl der Zeilenumbrüche in einem Div berechnen? ⇐ CSS

[Anonymous]

Ich habe einen Div-Wrap, dessen Größe ein Prozentsatz der Bildschirmbreite ist. In diesem Wrap befinden sich mehrere .item-Divs. Wenn das Fenster kleiner wird, bricht es offensichtlich in neue Zeilen auf.
Ich habe Code geschrieben, der im Grunde genommen die Breite des Zeilenumbruchs nimmt und sie durch die Summe der Breiten der .item-Boxen dividiert. Aber der Fehler besteht darin, dass es darüber nachdenkt, wie viele Kästchen insgesamt hineinpassen würden, wenn man sie perfekt wie Bausteine ​​kombinieren würde, aber so funktioniert es nicht, weil die Reihenfolge stagniert.
Wie könnte ich diese Logik zum Laufen bringen?
CodePen
jQuery:

Code: Select all

var itemWidth = 0;
var lineCount = 1;

$(window).on('resize', function(){
var lineWidth = $('.line').width();
var itemWidthSum = 0;
lineCount=1;

$('.item').each(function(index, element) {
if(itemWidthSum < (lineWidth - $(element).outerWidth())) {
itemWidthSum = itemWidthSum + $(element).outerWidth();
} else {
lineCount++;
itemWidthSum = 0;
}
});
});

HTML:

Code: Select all

Computer Science
Language
Marketing
Biology
Computer Science
Language
Marketing
Biology
Computer Science
Language
Marketing
Biology
Computer Science
Language
Marketing
Biology

CSS:

Code: Select all

body {
padding:25px;
}

.answer {
position:fixed;
bottom:0;
left:0;
}

#container {
border: 1px solid rgb(200,200,200);
height: auto;
width: 30%;
margin:0 auto;
}

.item {
padding: 10px;
background-color: #aef2bd;
float: left;
}

.rect {
height: 100px;
width:100%;
position: relative;
}

.rect .line {
position:absolute;
height:50px;
width: 100%;
bottom:0;
border-top: 1px solid red;
}