I am trying to limit the height of each individual topic-container div to 100px by default and display ellipsis at the end to indicate that there is more text. When a specific div is clicked, it should expand to 100% height. However, I am facing an issue where the text adjusts to the width of 100% instead of the height. How can I resolve this?
HTML
<div class="topics">
<div class="topic-container">
<img src="http://via.placeholder.com/150x150">
<div class="name">Full Name</div>
<div class="title">Title</div>
<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget iaculis massa. Mauris sed cursus eros. Quisque tempus eros a diam mollis tincidunt. Ut fermentum diam tortor. Morbi auctor, ipsum nec consequat pharetra, nisl nibh mollis eros, a molestie purus nunc quis augue. Curabitur et erat felis. Nullam eu purus quis dolor consectetur commodo eu a velit. Vivamus at velit.</div>
</div>
<div class="topic-container">
<img src="http://via.placeholder.com/150x150">
<div class="name">Full Name 2</div>
<div class="title">Title 2</div>
<div class="description">2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget iaculis massa. Mauris sed cursus eros. Quisque tempus eros a diam mollis tincidunt. Ut fermentum diam tortor. Morbi auctor, ipsum nec consequat pharetra, nisl nibh mollis eros, a molestie purus nunc quis augue. Curabitur et erat felis. Nullam eu purus quis dolor consectetur commodo eu a velit. Vivamus at velit.</div>
</div>
</div>
CSS
.topics {
background-color: white;
width: 50%;
position: relative;
}
.topic-container {
float: left;
margin-left: 1em;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.5;
z-index: 50;
}
.description {
white-space: nowrap;
width: 100px;
height: 100px;
border: 1px solid red;
overflow: hidden;
word-wrap: break-word;
text-overflow: ellipsis;
}
/*.expand-description {
width: 150px;
height: 200px !important;
position: absolute;
top: 0;
background: rgba(0,0,0,0.2);
color: white;
}*/
JQuery
$('.topics').click(function() {
$('.description').addClass('expand-description').css('zIndex', '60');
});
Working fiddle: http://jsfiddle.net/qfjk3dmt/