Word-wrap text in overlay
Question
I have the following issue where I don't really know on how to word-wrap the overlay text to my desires. 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 ...
$('.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).
1 answers
solution1
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
word-wrap: break-word;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.