Question

我们需要能够限制移动设备上显示的文字数量。我们希望以类似于各种“Read More”插件（http://plugins.learningjquery.com/expander/index.htm）的方式这样做，我们在包含HTML元素的div上调用一些JS。

问题是，我们不想在大型设备上的文本上调用这些库。是否可以将媒体查询与某些CSS结合使用，而无需引入新的库（如Respond.js）？

有没有人有更好的方法来限制移动设备上的文字，并提供更多阅读链接？

编辑：我们正在使用媒体查询来处理某些宽度。但我们希望以智能方式截断一个带有一些文本的容器。如果你在移动设备上，并且div包含1000个单词，我们希望显示100个单词，然后显示“Read More”按钮以展开文本。如果您调整窗口大小，此按钮和截断需要无缝消失。

我们现在拥有以下内容：

在页面加载时，将内容div中的所有内容（包含我们要截断的文本的div）复制到其上方的div。
使用max-width媒体查询隐藏该content-div，并显示新的内容。使用一些JS来截断新div元素中的文本。
在隐藏新div的新div的末尾添加一个按钮，并显示旧的div。

有没有更好的方法来处理这个？

Answer 1

当页面宽度低于指定数量时，您可以使用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;
}

Pure 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/

在此处阅读更多内容：http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

使用多个按钮

要使用多个按钮进行此操作，我们需要稍微修改一下。基本上我们需要使用公共类查询按钮元素并循环它们以分配click事件并更改innerHtml。例如：

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

document.querySelectorAll("button.read_more").forEach(function(button) {
  button.addEventListener( 'click' , changeClass);
});

function changeClass() {
  var content = document.getElementById("extra_content");
  var buttons = document.querySelectorAll("button.read_more");

  content.classList.toggle("show");

  var buttonText = content.classList.contains("show") ? "Show Less" : "Show More";

  buttons.forEach(function(button) {
    button.innerHTML = buttonText;
  });
}

以下是一个包含多个按钮的工作示例：https://jsfiddle.net/uc8d7w3e/1/

Answer 2

您想要this吗？

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

Answer 3

如果您只需要为大/小屏幕调用JS，请检查$(window).width()。

使用@media (max-width: something)在CSS中制定特定规则

响应式设计 - 仅在较小的屏幕上显示“阅读更多”按钮

3 个答案:

使用多个按钮