html - 点击后显示的所有内容

Question

我在 <p> 中有文字我想隐藏最后几行并在点击后显示。但我只能显示不完整的第一行，添加文本“..查看更多”以单击。我没有找到如何只用 CSS 来解决它。

这是我的 HTML:

<section id="related">
    <div class="inner">
        <section class="col" id="news">
            <h3><a href="#">News</a></h3>
            <h4>Some title</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam rhoncus, lacus sed tincidunt mollis,
            tellus erat mollis sapien, at ullamcorper augue nisi a justo. Praesent et tellus at lorem rhoncus venenatis
            non id velit. Nullam vestibulum arcu quis erat fermentum, sed venenatis arcu tristique. Quisque fermentum nisi sed porta fermentum. Nam tincidunt, ipsum et blandit sodales, turpis enim ultricies erat, a viverra tellus elit vitae enim. Etiam placerat enim orci, nec pulvinar lorem vehicula ac. Etiam eget elementum sem. Integer nisi elit, bibendum vitae leo non, posuere tincidunt neque.</p>
            <strong>10 Dec 2014</strong>
            <h4>Some title</h4>
            <p>Vestibulum luctus nibh non risus semper consectetur. Sed laoreet eget metus in elementum. Ut mollis
            faucibus risus a faucibus. Vestibulum eget maximus purus. Maecenas vitae ipsum mattis augue feugiat
            rutrum. Sed tortor eros, convallis vitae libero vitae, commodo lobortis lacus. Duis condimentum consectetur
            augue, vel pharetra orci aliquam sit amet.</p>
            <strong>5 Jan 2015</strong>
        </section>
    </div>
</section>

还有我的 CSS 有 Unresolved 问题:

#related .inner .col p {
    white-space: nowrap;
    /*height: 50px;*/
    overflow: hidden;
    text-overflow: clip;
}

#related .inner .col p::after {
    display: block;
    float: right;
    padding-top: 15px;
    content: "..see more..";
    color: #36C7E3;
}

它应该是这样的:

Here is the JSFiddle .

注意:我不能修改 HTML 代码，我只能修改 CSS。请问有什么解决办法吗？

Answer 1

你可以试试this

悬停是可能的。

 #related .inner .col p:hover{
  overflow: auto;
 }

我不确定如何使用 css 实现 click。

#related {
    float: left;
    width: 100%;
    min-height: 160px;
    height: auto;
    background-color: #3f5673;
    color: white;
}

#related .inner .abox .thumb {
    text-decoration: none;
}

#related .inner .abox .thumb .sgn {
    display: block;
    padding-left: 15px;
    color: #36C7E3;
}

#related .inner a {
    color: white;
}

#related .inner h3, h4 {
    color: white;
}

#related .inner .col {
  float: left;
    width: 30%;
    margin-left: 30px;
}

#related .inner .col strong {
    padding-left: 15px;
    color: #36C7E3;
}

#related .inner .col p {
    white-space: nowrap;
    /*height: 50px;*/
    overflow: hidden;
    text-overflow: clip;
}

#related .inner .col p::after {
    display: block;
    float: right;
    padding-top: 15px;
    content: "..see more..";
    color: #36C7E3;
}

#related .inner .col p:hover{
  overflow: auto;
}

<section id="related">
	<div class="inner">
		<section class="col" id="news">
			<h3><a href="#">News</a></h3>
				<h4>Some title</h4>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam rhoncus, lacus sed tincidunt mollis,
				tellus erat mollis sapien, at ullamcorper augue nisi a justo. Praesent et tellus at lorem rhoncus venenatis
				non id velit. Nullam vestibulum arcu quis erat fermentum, sed venenatis arcu tristique. Quisque fermentum nisi sed porta fermentum. Nam tincidunt, ipsum et blandit sodales, turpis enim ultricies erat, a viverra tellus elit vitae enim. Etiam placerat enim orci, nec pulvinar lorem vehicula ac. Etiam eget elementum sem. Integer nisi elit, bibendum vitae leo non, posuere tincidunt neque.
				</p>
				<strong>10 Dec 2014</strong>
				<h4>Some title</h4>
				<p>Vestibulum luctus nibh non risus semper consectetur. Sed laoreet eget metus in elementum. Ut mollis
				faucibus risus a faucibus. Vestibulum eget maximus purus. Maecenas vitae ipsum mattis augue feugiat
				rutrum. Sed tortor eros, convallis vitae libero vitae, commodo lobortis lacus. Duis condimentum consectetur
				augue, vel pharetra orci aliquam sit amet.</p>
				<strong>5 Jan 2015</strong>
		</section>
	</div>
</section>

如果需要，您可以在悬停时更改 p 元素的宽度。