Javascript 响应性设计-仅在较小屏幕上使用“阅读更多”按钮

我们需要能够限制移动设备上显示的文本量。我们希望这样做的方式类似于各种各样的readmore插件（），我们在包含HTML元素的div上调用一些JS

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

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

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

我们现在的情况如下：

在页面加载时，将content div（包含要截断的文本的div）中的所有内容复制到其上方的div中

使用“最大宽度媒体查询”隐藏该内容div，并显示新的内容div。使用一些JS截断新div元素中的文本

在新div的末尾追加一个按钮，隐藏新div并显示旧div

---

有没有更好的处理方法

使用CSS@media，当页面宽度小于指定值时，可以隐藏/显示元素

HTML:

以下是一些内容

这里有一些额外的内容

显示更多 CSS:

@介质（最大宽度：650px）{
.额外内容{
显示：无；
}
#阅读更多{
显示：块；
}
}
.多读{
显示：无；
}
.表演{
显示：块！重要；
}

纯JavaScript：

document.getElementById（“阅读更多”）.addEventListener（'click'，changeClass）；
函数changeClass（）{
var content=document.getElementById（“额外内容”）；
var btn=document.getElementById（“读取更多”）；
content.classList.toggle（'show'）；
if（content.classList.contains（“show”））{
btn.innerHTML=“显示较少”；
}否则{
btn.innerHTML=“显示更多”；
}
}

下面是一个工作示例：

请在此处阅读更多信息：

---

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

显示更多信息
这里有一些内容

这里有一些额外的内容
显示更多

document.queryselectoral（“button.read\u more”）.forEach（函数（按钮）{
按钮。addEventListener（'click'，changeClass）；
});
函数changeClass（）{
var content=document.getElementById（“额外内容”）；
var buttons=document.queryselectoral（“button.read_more”）；
content.classList.toggle（“显示”）；
var buttonText=content.classList.contains（“show”）？“show Less”：“show More”；
按钮。forEach（功能（按钮）{
button.innerHTML=buttonText；
});
}

---

下面是一个具有多个按钮的工作示例：

您想要类似的功能吗

---

如果只需要为大/小屏幕调用JS，请检查

$（window.width（）

---

使用

@media（max width:something）

在CSS中制定特定规则

最初的反应是为指定的缩短容器指定文本溢出：在特定mq处省略号，这就是您现在获得的效果？我的回答解决了您的问题吗？我已经有了与您完全相同的媒体查询，所以从技术上讲它没有：P，但我给你一个绿色箭头。你可能是指

display:none

如果你有多个按钮，这个脚本不起作用，它只会先触发一个。有没有关于使用多个按钮的更新？Thanks@Giacomo答案已更新为使用多个按钮。

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