Question

我遇到以下问题，我对如何根据自己的意愿将overlay文字进行自动换行一无所知。我希望文本在叠加层的底部（或底部上方几个像素）处截断，并希望以三点结束，例如：eu dolor sed, euismod ...

$('.container').mouseenter (function () {
    //alert($(this).find('.soverlay').innerHeight()); //returns 56.8 px
    var hgt = 'calc(100% - ' + parseInt($(this).find('.soverlay').innerHeight()+5) + 'px)';
    $(this).find('.overlay').css({'height' : hgt});
});

$('.container').mouseleave (function () {
    //alert($('.container .soverlay').innerHeight()); //returns 56.8 px
    $(this).find('.overlay').css({'height' : '0px'});
});

.container {
  position: relative;
  width: 50%;
  max-width: 250px;
}

.image {
  border-radius: 10px;
  display: inline-block;
  width: 100%;
  height: auto;
  box-sizing: border-box;
}

.soverlay {
  border-radius: 10px 10px 0px 0px;
  box-sizing: border-box;
  position: absolute; 
  top: 0; 
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1; 
  width: 100%;
  transition: .5s ease;
  color: white;
  font-size: 16px;
  padding: 10px;
  text-align: center;
  overflow: hidden; /* remove on hover-in; add on hover-out*/
  white-space: nowrap; /*remove on hover-in; add on hover-out */
  text-overflow: ellipsis;
}

.overlay {
  border-radius: 0px 0px 10px 10px;
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  font-size: 12px;
  color: white;
}

.container:hover .overlay {
  /* height: calc(100% - 57px); /* change height depending on 'soverlay' height */
  border-top: 3px solid yellow;
}

.container:hover .soverlay{
  overflow: unset;
  white-space: unset;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>

<h2>Image Overlay Title</h2>
<p>Hover over the image to see the effect.</p>

<div class="container">
  <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
  <div class="soverlay">Some people just have very long names</div>
    <div class="overlay">This is a very long job description which doesn't really fit in this div. Now the question is how do I cut of the text at the bottom of the overlay. </br></br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit convallis ligula, eget sollicitudin dolor lobortis ut. Duis venenatis, est vel volutpat dictum, magna mi pellentesque dolor, eu suscipit ligula augue eleifend justo. Nunc eleifend diam velit, id maximus eros tristique et. Donec sagittis mattis velit. Morbi gravida tincidunt metus in suscipit. Curabitur pharetra orci nec nunc sodales cursus. Morbi hendrerit id orci non vulputate. Duis nulla turpis, bibendum eu dolor sed, euismod mollis velit. Nullam tellus enim, condimentum porta rutrum ac, feugiat in ex. Sed tristique metus nunc, ut elementum elit hendrerit et. Quisque sed interdum ipsum. Etiam posuere.
  </div>
</div>

</body>
</html>

我已经设法通过使用PHP来解决问题，方法是将每个字符串的长度切成一定长度并附加三点，但实际上我只想尝试使用CSS来做（以进一步改善我的前端技能）。

Answer 1

您应将固定宽度添加到.soverlay Div

.soverlay{width:250px;}

，然后使用以下CSS属性

word-wrap: break-word;

文字重叠式换行

1 个答案: