文字重疊式換行
[英]Word-wrap text in overlay
問題描述
我遇到以下問題，我對如何將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來做（以進一步改善前端技能）。
1 個解決方案
解決方案1
0 2018-06-27 13:36:43
您應該將固定寬度添加到.soverlay Div
.soverlay{width:250px;}
然后使用以下CSS屬性
word-wrap: break-word;
自動換行不適用於浮動文本
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.