This question already has answers here:
Applying an ellipsis to multiline text
(25个答案)
去年关闭。
伙计们,我希望省略号并在用户单击第四行或第三行后读取更多标签,以使CSS读取更多的内容。
我想要的是这样的:
我想只显示前两个词,然后再阅读更多标记,以显示用户单击和未决内容。像这样跟随:-
现在点击更多后,所有内容显示如下:-
对于所有浏览器
另外,您可以使用js来做到这一点。
(25个答案)
去年关闭。
伙计们,我希望省略号并在用户单击第四行或第三行后读取更多标签,以使CSS读取更多的内容。
我想要的是这样的:
<div class="mycontent">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also this is aweome</p>
</div>
我想只显示前两个词,然后再阅读更多标记,以显示用户单击和未决内容。像这样跟随:-
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy... read more
现在点击更多后,所有内容显示如下:-
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but
also this is awesome
最佳答案
您需要在两行之后截断文本。纯CSS可能有两种方法。
仅适用于Chrome
p {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
对于所有浏览器
p {
overflow: hidden;
position: relative;
line-height: 1rem;
max-height: 2rem;
text-align: justify;
margin-right: -1rem;
padding-right: 1rem;
}
/* create the ... */
p:before {
content: '...';
position: absolute;
right: 0;
bottom: 0;
}
p:after {
content: '';
position: absolute;
right: 0;
width: 1rem;
height: 1rem;
margin-top: 0.2rem;
background: white;
}
另外,您可以使用js来做到这一点。