使用JavaScript显示更多或更少的文本

我需要使用JavaScript和HTML创建一个“基本的”显示更多、显示更少的文本切换。我找到了很多例子；但是，它必须允许“优雅降级”，以便在JavaScript关闭或不可用时，显示“隐藏”文本。 尽管我很想使用jQuery，但这不是一个选项

---

任何示例都将不胜感激，谢谢。

您可以让它默认加载全文，然后使用javascript方法截断它。。。并将全文存储（在jsvar中，或者更好地隐藏在页面中）以恢复

我会混合使用CSS和次要JavaScript

text-overflow:ellipsis;

将输出如下内容

这是我的文本，它是…

当文本对于其周围元素太大时。然后当页面加载时，只需收缩元素使其变小，并在其旁边有一个“read more”按钮，该按钮将触发一个JS函数，该函数将使元素变大到完整大小。

Show/Hide text
<button onclick="hide('hide1')">Show/Hide text</button>
<span id="hide1" class="hide">This is extra text</span>


<script>
var hideElements = document.getElementsByClassName("hide");
for (i=0; i<hideElements.length; i++) {
hideElements[i].style.display = "none";
}
function hide(elem) {
var hideElement = document.getElementById(elem);
if (hideElement.style.display == "inline-block") {
hideElement.style.display = "none";
} else {
hideElement.style.display = "inline-block";
}
}
</script>

这是额外的文本
var hideElements=document.getElementsByClassName（“隐藏”）；
对于（i=0；至于优雅的降级，最简单的方法是预先显示整个内容，然后立即运行“showless”函数（假设JS处于启用状态）当页面加载时。是的，如果允许CSS3，这是一个好方法。我必须支持回到IE7，所以我认为以旧的方式…没关系，你只是在旧浏览器上不会得到省略号，“阅读更多”按钮仍然会显示。这只是一个让事情看起来更好的小美学。类似于元素上的圆角可以看起来很好，你仍然会为使用最新浏览器的人这样做。你不会因为一些人看不到它就把它挡在外面。是的，很公平，我想我从来没有想过它，因为我只看过server-side从不以js的方式截断。我能想到的唯一问题是，它可能与一些图像或其他东西内联？这是一种愚蠢的边缘情况