我在 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>最佳答案
响应式解决方案:行高
唯一的方法是调整行高，这样它就不会切断文本的中间部分，下面是一个例子:
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>关于html - CSS - 段落将无法在 div 中正确显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31534678/