如何设置样式阅读更多使用CSS3

How to style "Read More" using CSS3

本文关键字：CSS3 样式 何设置 设置      更新时间：2023-09-26

下面是我的JQuery函数。我想将CSS样式应用于"Read More"answers"Read Less"文本，这是函数的一部分。我们怎么做呢?

$(document).ready(function() { 
  $('.YourName').jTruncate({ 
    length: 25, 
    minTrail: 0,
    moreText: "Read More", 
    lessText: "Read Less", 
    ellipsisText: "...", 
  }); 
}); 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript" src="http://tester3.yolasite.com/resources/javascript/jtruncate.js"></script> 
<p class="YourName">Hello, Text will truncate after 25 characters and a "Read More" link will be appended to it. Here is some more text. Here is some more text. Here is some more text. Here is some more text. Here is some more text. Here is some more more text. Here is some more text. Here is some more text. This is the end.</p>

moreText: "<span class='moreText'>Read More</span>", // The text to use for the "more" link. 
lessText: "<span calss='readLess'>Read Less</span>", // The text to use for the "less" link.

然后在你的CSS样式中像往常一样…

.moreText{/* styles here */}
.readLess{/* styles here */}
相关文章：