Question

好的，所以这里举个例子，让我说我想嵌入一个长期的要点，如：

<script src="https://gist.github.com/benanne/3274371.js"></script>

链接到要点：https://gist.github.com/benanne/3274371

但是，嵌入式Gist在我的网页中太长了，我希望它只显示几行，可以通过点击等滚动或解包。

这可能吗？怎么样？

Answer 1

将gist调用包装在容器中，设置样式并完成工作。

编辑刚刚注意到要显示/隐藏所有内容，jQuery使这个变得微不足道，你没有在你的问题中提到jQuery或javascript所以我想出了一个hacky CSS / html选项使用目标

.gistcontainer {
  max-height: 300px;
  overflow: auto;
}

.gistcontainer:target .show {display:none;}
.gistcontainer:target {max-height:none;}

<div class="gistcontainer" id="gist1">
  <a href="#gist1" class="show">More...</a>
  <script src="https://gist.github.com/benanne/3274371.js"></script>
</div>

这个SO Question也可能是有意义的，尤其是gist使用的CSS类似乎随着时间的推移而发生变化这一事实，因此“包装”的解决方案可能更具未来性。

在HTML中嵌入Gist的简短紧凑版本

1 个答案: