CSS

Question

我在 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>

Answer 1

您可以将容器的overflowcss属性设置为scroll。

#expContainer {
                display:block;
                overflow:scroll;
                text-overflow: ellipsis;
                background: red;
                height: 100%;
            }

因为你已经固定高度 #expPanel ，设置溢出 #expContainer 就可以解决问题。

Answer 2

您可以将容器的溢出 CSS 属性设置为 scroll/auto。如果您希望您的 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>

Answer 3

响应式解决方案：行高

唯一的方法是调整行高，这样它就不会切断文本的中间部分，下面是一个例子：

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>

CSS - 段落将无法在 div 中正确显示

CSS - Paragraph will not display in div correctly

html

overflow

响应式解决方案：行高