響應式設計 - 只能在較小屏幕上閱讀更多按鈕

我們需要能夠限制移動設備上顯示的文本數量。我們希望能夠以類似於各種「Read More」插件（http://plugins.learningjquery.com/expander/index.htm）的方式這樣做，我們在包含HTML元素的div上調用一些JS。響應式設計 - 只能在較小屏幕上閱讀更多按鈕

問題是，我們不想在大型設備上的文本上調用這些庫。是否可以將媒體查詢與某些CSS結合使用，而不需要引入新的庫（如Respond.js）？

有沒有人有更好的方法來移動設備上的有限文本，並提供更多的閱讀鏈接？

編輯：我們正在使用媒體查詢來處理某些寬度。但是我們想要以一種明智的方式截取一個包含文本的容器。如果您使用的是移動設備，並且div包含1000個單詞，我們希望顯示100個單詞，然後顯示一個「閱讀更多」按鈕，以展開文本。如果調整窗口大小，則此按鈕和截斷需要無縫地消失。

我們現在擁有的是以下幾點：

在頁面加載，所有內容複製的內容div來它上面的一個div（包含我們要截斷文本的DIV）。
使用最大寬度媒體查詢來隱藏content-div並顯示新內容。使用一些JS截斷新的div元素中的文本。
追加一個按鈕到隱藏新div的新div的末尾，並顯示舊的div。

有沒有更好的處理方法？

來源

2013-04-11 Dominic Bou-Samra

最初的反應是分配文本溢出：在某些MQ的省略號指定的縮短容器 – 2013-04-11 22:06:42

是什麼，你現在給你想要的效果？ – 2013-04-11 22:32:54

我的答案解決了您的問題嗎？ – 2013-05-01 18:22:00

您可以使用CSS @media在頁面寬度低於指定數量時隱藏/顯示元素。

HTML：

<p>here is some content.</p> 
<p id="extra_content" class="extra_content">here is some extra content</p> 
<button id="read_more" class="read_more">Show More</button>

CSS：

@media (max-width: 650px) { 
    .extra_content { 
    display: none; 
    } 
    #read_more { 
    display: block; 
    } 
} 

.read_more { 
    display: none; 
} 

.show { 
    display: block!important; 
}

純JavaScript：

document.getElementById("read_more").addEventListener('click' , changeClass); 

function changeClass() { 
    var content = document.getElementById("extra_content"); 
    var btn = document.getElementById("read_more"); 
    content.classList.toggle('show'); 

    if (content.classList.contains("show")) { 
     btn.innerHTML = "Show Less"; 
    } else { 
     btn.innerHTML = "Show More"; 
    } 
}

這裏有一個工作示例：http://jsfiddle.net/xfgqW/2/

來源

2013-04-11 21:44:48

如果你有多個按鈕，這個腳本不起作用，它只會觸發第一個按鈕。 – 2018-02-21 15:38:00

你想要類似this？

@media screen and (max-width: 1024px) { 
    #read_more { 
    display: none; 
    } 
}

來源

2013-04-11 21:45:16 DonCallisto

你可能是指'display：none' – VDarricau 2017-01-27 08:48:46

@VDarricau你是對的:) – DonCallisto 2017-01-27 08:50:05

如果您需要調用JS只爲大/小屏幕，檢查$(window).width()。

使用@media (max-width: something)作出具體規定在CSS

來源

2013-04-11 21:48:34 Evgeny

響應式設計 - 只能在較小屏幕上閱讀更多按鈕

回答

相關問題