wypływający tekst poza ramkę w div

0

witam, mam problem z div'ami

<div class="onclickclass" style="width:400px; height:150px; display:block; vertical-align:center; text-align:center; border: 1px solid; border-color: #C0C0C0 #000000 #000000 #C0C0C0; padding: 10px 10px 10px 10px; margin:auto; margin-bottom:5px;">
<div style="float:left; display:block; width:140px; background-color: transparent;">
<div style="width:100%; text-align:center; padding: 1px 1px 1px 1px;"><img src="images/user.png" style="border:0px; width:110px; height:110px" alt="user" title="user" /></div>
<div style="width:100%; text-align:center; padding: 1px 1px 1px 1px;">nick</div>
<div style="width:100%; text-align:center; padding: 1px 1px 1px 1px;">czas</div>
</div>
<div style="float:left; display:block; width:260px; vertical-align:top;">
<div style="width:100%; text-align:left; margin-top:1px; margin-bottom:10px;">temat</div>
<div style="width:100%; text-align:justify; text-indent:10px;">Lorem ipsum dolor sit amet nunc. Vestibulum iaculis. Nam feugiat pede. Cras hendrerit sagittis. Vestibulum at mauris magna, tincidunt lorem, pellentesque a, ligula. Pellentesque tellus. In ornare facilisis pellentesque at, suscipit sit amet, consectetuer tincidunt leo elit purus, consectetuer lacus. Maecenas ut sapien accumsan pede lobortis laoreet sapien. Cras eu aliquam enim. Sed laoreet iaculis in, elementum quis, varius vitae, egestas mi, nec diam lorem, id tortor et ultrices tortor at tortor. Nam ullamcorper ut, urna. Aenean tincidunt varius risus velit, a lorem scelerisque a, sodales rutrum, wisi placerat nec, congue et, bibendum nulla sed eros. Vestibulum ante ipsum dolor tellus vulputate tellus quis wisi. Aenean gravida vitae, placerat pharetra eget, tortor. In urna. Phasellus ut enim. Aenean sodales, velit in mattis lorem velit libero ipsum cursus lectus felis facilisis faucibus eu, fringilla neque tellus, at lobortis venenatis, elit dapibus sit amet neque. Nunc ipsum pharetra porttitor vel, magna. Nulla massa. Integer in ultricies urna arcu quis augue. Fusce condimentum ultricies, hendrerit laoreet. Aenean scelerisque id, dolor. Pellentesque mollis nunc commodo magna, at quam. Maecenas in aliquam risus ut arcu.</div>
</div>
</div>

Skrypt generuje kilka podobnych divów na stronie, jeden pod drugim. Jeśli zawartość "lorem ipsum" jest krótka wtedy nie ma problemu, ale jeśli jest dłuższy tekst to w efekcie wypływa poza główny div (w dół). Co zrobić żeby div automatycznie dopasowywał się do długości "lorem ipsum ..." ?

1

Musisz zmienić height: 150px na min-height: 150px

1

@shreker: Odpowiedź @Xarviel jest poprawna, ale muszę się przyczepić do jednej rzeczy, którą zauważyłem w twoich wątkach. Kod JS i CSS dużo lepiej jest zapisywać po za HTML, w oddzielnych plikach.
Dla CSS - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link
Dla JS - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script (atrybut src).

Dodam jeszcze taką ciekawostkę, która może ci się przydać, że jeśli tekst w jakimś elemencie jest za długi, a chcemy aby jego wymiary pozostały takie same, możemy skorzystać z

text-overflow: ellipsis; 

Wtedy za długi tekst będzie automatycznie skracany do odpowiedniej długości, a na jego końcu pojawi się "...". - https://www.w3schools.com/cssref/css3_pr_text-overflow.asp
Warto wiedzieć, że jest taka możliwość.

1 użytkowników online, w tym zalogowanych: 0, gości: 1