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

响应性的解决方案：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>

Answer 2

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

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

由于您有#expPanel的固定高度，设置#expContainer的溢出将解决问题。

Answer 3

您可以将容器的溢出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>

CSS - 段落不会正确显示在div中

3 个答案:

响应性的解决方案：line-height