CSS-段落将无法正确显示在div中
[英]CSS - Paragraph will not display in div correctly
问题描述
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). 
我在div内有一个段落，但是文本太长并且文本溢出无法正常工作，并且我读到nowrap可以解决我的问题，但是在这种情况下，由于段落需要一定的高度，并非全部在1行上（需要多行）。
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 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. 也许值得一提的是，我将添加JavaScript来更改红色背景容器的高度，我希望文本会随之更改，同时仍然对其应用文本溢出。
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 个解决方案
解决方案1
3 已采纳 2015-07-21 09:24:45
Solution that works responsively: line-height 可响应的解决方案：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>
解决方案2
1 2015-07-21 09:10:34
You can set overflow css property of container to scroll . 您可以将容器的overflow css属性设置为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. 由于您已固定#expPanel高度， #expPanel设置#expContainer溢出将解决此问题。
解决方案3
1 2015-07-21 09:19:44
You can set overflow CSS property of container to scroll/auto. 您可以将容器的溢出CSS属性设置为滚动/自动。 If you want your div must grow and show all content without scrollbar then remove overflow:hidden 如果您希望div必须增长并显示所有内容而没有滚动条，请删除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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.