Question

我希望每个单独的主题容器div默认情况下最多仅显示100px的高度，并在末尾显示省略号以指示还有更多文本。单击特定的div后，我希望它以100％的高度显示。我现在的问题是文本不断调整为100％的宽度而不是高度。我该如何完成？

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');
});

正在工作的小提琴：http://jsfiddle.net/qfjk3dmt/

Answer 1

从您的white-space: nowrap;类中删除.description，这就是使文本保持水平方向的原因

CSS jQuery文本溢出省略号不起作用

1 个答案: