CODEWITHSUNDEEP
javascripthtmlcssoverflowdropdown
Marcus
Marcus

Reputation: 45

How to fit text properly inside a div with overflow: hidden?

I'm having problems with the text inside a div with overflow: hidden. The div is a dropdown that shows another div containing an image and text. The dropdown works with javascript editing height. There is also a problem; once in a while when I click on the drop button, it takes two clicks for it to work, I don't know why.

<div class="dropDiv">
<strong class="divTitle">Title</strong>
<div class="dropDownBtn" onclick="dropDown()"></div>
<br>
<div class="heroInfoDiv">
<img height="100%" width="20%" src="Media/image/img.png">
<div class="textHolder">If this text is too long, it dissapears.</div>
</div>
</div>

At first I tried having the div holding the text as a p-element, but changing it to div with any kind of CSS on it didn't work. What I want to happen is for the text to obey the rules of like any normal container, where it breaks lines automatically.

Here is a jsFiddle showing what is happening: https://jsfiddle.net/56oypcbj/5/

Upvotes: 0

Views: 154

Answers (1)

Pablo Darde
Pablo Darde

Reputation: 6402

Remove the float: left form your .textHolder class.

.textHolder {
  padding: 0px;
}

Upvotes: 1

Related Questions