CSS - Paragraph will not display in div correctly
Question
I have a paragraph inside of a div but the text is too long and the text-overflow does not work, and I have read that nowrap fixes my problem but in this case it doesn't as the paragraph needs to be a certain height and not all on 1 line (needs to be multiple lines).
This image shows what I have and what I want it to look like (The image on the left is what I have now and the image on the right is how I want it to look):
http://i.imgur.com/5l5SSmh.jpg
It maybe worth mentioning that I will be adding JavaScript to change the red background containers height and I was hoping the text would change with it while still having the text-overflow applied to it.
This is my code:
<!DOCTYPE html> <html> <head> <style type="text/css"> #expPanel { background-image: url('http://i.imgur.com/76BdtTw.jpg'); background-repeat: no-repeat; background-size: 100% 100%; position: absolute; } #expContainer { display:block; overflow: hidden; text-overflow: ellipsis; background: red; height: 100%; } #content { margin-top: 80px; padding: 10px 20px; color: blue; font-family: Arial, "Times New Roman", Times, serif; } </style> </head> <body> <div style="position: relative;"> <div id="expPanel" style="width: 600px; height: 280px;"> <div id="expContainer"> <p id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non rutrum libero. Integer imperdiet tellus at ipsum dictum, ut dapibus nulla egestas. Ut tristique cursus finibus. Nunc et sapien a nisl cursus ultrices. Ut aliquam, urna et aliquam faucibus, sem velit iaculis orci, sit amet venenatis leo quam a nibh. Nunc commodo eu lectus vel tempor. Curabitur sed velit euismod, sagittis quam a, cursus ipsum. Maecenas in dui maximus mauris bibendum tincidunt a at turpis. Curabitur efficitur metus vitae augue tristique dapibus. Vestibulum porta laoreet aliquet. Phasellus aliquam, lacus eu pharetra lobortis, quam quam sollicitudin turpis, ultrices convallis libero risus sed nunc. Maecenas eget ornare orci. Suspendisse commodo tellus et arcu sodales ultrices. In lobortis ullamcorper justo consectetur facilisis. Cras at urna auctor, pulvinar nisi porta, pellentesque sapien. Etiam sapien quam, pulvinar eget lacus ac, tempor lobortis ante. </p> </div> </div> </div> </body> </html>
3 answers
solution1
3 ACCPTED 2015-07-21 09:24:45
Solution that works responsively: line-height
The only way to do this is by adjusting the line height so it doesn't cut off the middle of the text, here is an example:
var btn = document.querySelector('button'); btn.onclick = function() { var container = document.querySelector('.container'); container.style.height = 'auto'; btn.style.display = 'none'; return false; };
.container { background: #ddd; height: 70px; padding: 10px; overflow: hidden; } .container p { line-height: 1.6; margin: 0; } button { display: inline-block; margin: 10px 0; }
<div class="container"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem officiis eius enim consectetur saepe nisi voluptatem ut possimus. Ab aliquid blanditiis temporibus! Optio iusto odit illo inventore aspernatur. Expedita pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem officiis eius enim consectetur saepe nisi voluptatem ut possimus. Ab aliquid blanditiis temporibus! Optio iusto odit illo inventore aspernatur. Expedita pariatur.</p> </div> <button>Read more</button>
solution2
1 2015-07-21 09:10:34
You can set overflow css property of container to scroll .
#expContainer {
display:block;
overflow:scroll;
text-overflow: ellipsis;
background: red;
height: 100%;
}
As you have fixed height of #expPanel , setting overflow of #expContainer will solve the problem.
solution3
1 2015-07-21 09:19:44
You can set overflow CSS property of container to scroll/auto. If you want your div must grow and show all content without scrollbar then remove overflow:hidden
#expPanel { background-image: url('http://i.imgur.com/76BdtTw.jpg'); background-repeat: no-repeat; background-size: 100% 100%; position: absolute; } #expContainer { display:block; overflow: auto; /*scroll*/ text-overflow: ellipsis; background: red; height: 100%; } #content { margin-top: 80px; padding: 10px 20px; color: blue; font-family: Arial, "Times New Roman", Times, serif; }
<div style="position: relative;"> <div id="expPanel" style="width: 600px; height: 280px;"> <div id="expContainer"> <p id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non rutrum libero. Integer imperdiet tellus at ipsum dictum, ut dapibus nulla egestas. Ut tristique cursus finibus. Nunc et sapien a nisl cursus ultrices. Ut aliquam, urna et aliquam faucibus, sem velit iaculis orci, sit amet venenatis leo quam a nibh. Nunc commodo eu lectus vel tempor. Curabitur sed velit euismod, sagittis quam a, cursus ipsum. Maecenas in dui maximus mauris bibendum tincidunt a at turpis. Curabitur efficitur metus vitae augue tristique dapibus. Vestibulum porta laoreet aliquet. Phasellus aliquam, lacus eu pharetra lobortis, quam quam sollicitudin turpis, ultrices convallis libero risus sed nunc. Maecenas eget ornare orci. Suspendisse commodo tellus et arcu sodales ultrices. In lobortis ullamcorper justo consectetur facilisis. Cras at urna auctor, pulvinar nisi porta, pellentesque sapien. Etiam sapien quam, pulvinar eget lacus ac, tempor lobortis ante. </p> </div> </div> </div>
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.