CSS-段落将无法正确显示在div中
[英]CSS - Paragraph will not display in div correctly
问题描述
我在div内有一个段落，但是文本太长并且文本溢出无法正常工作，并且我读到nowrap可以解决我的问题，但是在这种情况下，由于段落需要一定的高度，并非全部在1行上（需要多行）。
下图显示了我所拥有的以及我想要的外观（左侧的图像是我现在所拥有的，右侧的图像是我想要它的外观）：
http://i.imgur.com/5l5SSmh.jpg
也许值得一提的是，我将添加JavaScript来更改红色背景容器的高度，我希望文本会随之更改，同时仍然对其应用文本溢出。
这是我的代码：
<!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
可响应的解决方案：line-height
做到这一点的唯一方法是调整行高，以免截断文本的中间，这是一个示例：
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
您可以将容器的overflow css属性设置为scroll 。
#expContainer {
display:block;
overflow:scroll;
text-overflow: ellipsis;
background: red;
height: 100%;
}
由于您已固定#expPanel高度， #expPanel设置#expContainer溢出将解决此问题。
解决方案3
1 2015-07-21 09:19:44
您可以将容器的溢出CSS属性设置为滚动/自动。 如果您希望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>
CSS段落的位置不正确
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.