css jquery文本溢出省略号不起作用

我希望每个单独的主题容器div在默认情况下仅显示100px的高度，并在末尾显示省略号以指示有更多的文本。当一个特定的div被点击时，我希望它以100%的高度显示。我现在的问题是，文本不断调整为100%的宽度，而不是高度。我如何做到这一点

HTML

JQuery

$('.topics').click(function() {
  $('.description').addClass('expand-description').css('zIndex', '60');
});

---

工作小提琴：

删除

空白：nowrap.description

类中选择code>，这就是使文本保持水平方向的原因

.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;
}*/

$('.topics').click(function() {
  $('.description').addClass('expand-description').css('zIndex', '60');
});