如何使用CSS3設計「閱讀更多」

-1

以下是我的JQuery功能。我想將CSS樣式應用於作爲該函數一部分的「Read More」和「Read Less」文本。我們如何做到這一點？如何使用CSS3設計「閱讀更多」

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

來源

2016-11-07 Vyas

有沒有辦法風格JS字符串。您應該將CSS應用於在頁面上顯示這些字符串的元素。你正在使用這個[jTruncate]（http://www.jeremymartin.name/projects.php?project=jTruncate）？ – Teemu

你能舉個例子嗎？或者是否有其他途徑在我的HTML文檔中包含「Read More」，以便我可以使用CSS3對其進行設計。 – Vyas

請向我們解釋'jTruncate（）'是什麼，或者它應該做什麼。也請使片段工作：在**運行**我得到「未捕獲的SyntaxError：意外的令牌<」。你應該把它交給我們，沒有錯誤。 –

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 */}

來源

2016-11-07 15:27:16

當我包含時，它不起作用。當我點擊「閱讀更多」時，我得到閱讀更多 – Vyas

我們可以在下面的樣式中設置「Read More」：var MoreText：「Read More」， – Vyas

@Vyas - 因爲你使用'.text（）'來插入代碼。改用'.html（）'。否則，將樣式應用於要插入的元素。您不能設計文本節點的樣式，只能是周圍的元素。 –

如何使用CSS3設計「閱讀更多」

回答

相關問題