Question

我在<p>中有文字，我想隐藏一些最后一行并点击后显示。但我只能显示不完整的第一行，添加文字＆＃34; ..查看更多＆＃34;点击。我没有找到如何用只有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还有未解决的问题：

#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元素的宽度。

Answer 2

我认为你应该在jQuery中使用“toggleClass”。这是My code

我为你的代码css添加了“ewm-hidden”替换课程

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

等于

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

HTML：

<section id="related">
    <div class="inner">
        <section class="col" id="news">
            <h3><a href="#">News</a></h3>
                <h4>Some title</h4>
                <p class="ewm-hidden">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 class="ewm-hidden">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：

#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.ewm-hidden {
    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;
}

使用Javascript：

$( ".col p" ).click(function() {
  $( this ).toggleClass( "ewm-hidden" );
});

Answer 3

这适用于您：

.read-more-state {
  display: none;
}

.read-more-target {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: .25s ease;
}

.read-more-state:checked ~ .ewm-hidden .read-more-target {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}

.read-more-state ~ .read-more-trigger:before {
  content: '...SeeMore...';
}

.read-more-state:checked ~ .read-more-trigger:before {
  content: '...Show less...';
}

.read-more-trigger {
  cursor: pointer;
  display: inline-block;
  padding: 0 .5em;
  color: #666;
  font-size: .9em;
  line-height: 2;
  border: 1px solid #ddd;
  border-radius: .25em;
}

<section id="related">
    <div class="inner">
        <section class="col" id="news">
            <h3><a href="#">News</a></h3>
            <div>

                <h4>Some title</h4>
                <input type="checkbox" class="read-more-state" id="post-1" />
                <p class="ewm-hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam rhoncus, lacus sed tincidunt mollis,
                <span class="read-more-target">
                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.
                </span> </p>
                <strong>10 Dec 2014</strong>
                 <label for="post-1" class="read-more-trigger"></label>
                 </div>
                 <div>
                 
                 
                <h4>Some title</h4>
                <input type="checkbox" class="read-more-state" id="post-2" />
                <p class="ewm-hidden">Vestibulum luctus nibh non risus semper consectetur. Sed laoreet eget metus in elementum. Ut mollis
                faucibus risus a faucibus. Vestibulum eget maximus purus.<span class="read-more-target"> 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.</span></p>
                <strong>5 Jan 2015</strong>
                <label for="post-2" class="read-more-trigger"></label></div>
        </section>
    </div>
</section>

点击

3 个答案: