Question

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

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

Answer 1

我会混合使用CSS和次要的JavaScript。

text-overflow:ellipsis;

将输出类似

的内容

This is my text and it is...

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

Answer 2

你可以让它默认加载全文，然后有一个javascript方法截断它...并保存全文（在js var或更好的可能隐藏在页面中）来恢复

Answer 3

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

http://jsfiddle.net/weissman258/N5e3N/

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

3 个答案: