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.