文字重叠式换行
[英]Word-wrap text in overlay
问题描述
I have the following issue where I don't really know on how to word-wrap the overlay text to my desires. 
我遇到以下问题，我对如何将overlay文字自动换行到我的愿望并不了解。 I want the text to cut-off at the bottom of the overlay (or a few pixels above the bottom) and I want it to end it with a triple dot, so something like this: eu dolor sed, euismod ... 我希望文本在叠加层的底部（或底部上方的几个像素）处截止，并希望以三点结束，例如： 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>
I've managed to make a work-around using PHP by just cutting the length of each string at a certain length and appending the triple dots, but I actually want to try and do it with CSS only (to further improve my front-end skills). 我已经设法通过使用PHP来解决问题，方法是将每个字符串的长度切成一定的长度并附加三点，但实际上我只想尝试使用CSS来做（以进一步改善前端技能）。
1 个解决方案
解决方案1
0 2018-06-27 13:36:43
You should add fix width to the .soverlay Div
.soverlay{width:250px;}
and then use the following CSS property 然后使用以下CSS属性
word-wrap: break-word;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.