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

Question

Here is my JQuery function below. I want to apply a CSS style to "Read More" and "Read Less" text, which are part of the function. How do we do that?

 $(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> 

Answer 1

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. 

and then in your css style them as usual...

.moreText{/* styles here */}
.readLess{/* styles here */}