Question

我有大量的页面包含不同长度的长文本（1000个单词+），我只使用CSS将其分成逻辑标签（摘要，内容，参考和作者）。 “内容”选项卡的文本远远多于其他选项卡，用户最终仍然像疯了一样滚动阅读全部内容。

我想要一种将长内容文本拆分为子标签或子页面的方法，但不允许用户离开主标签页（即我仍然希望它们能够在4个主要选项卡（摘要，内容，参考和作者）。

我也不希望必须浏览所有内容并手动输入内容部分的断点，因为内容可能会相当频繁地更改。

有关如何拆分内容部分以允许4选项卡导航并显示内容而不必滚动的任何想法？

我创建了一个codepen，其中包含了html和CSS代码的示例：http://codepen.io/TimSparrow/pen/xdKAa

    <div class="chapters">
<article class="tabs">

    <section id="tab1">
        <h2><a href="#tab1">Summary</a></h2>
    <p><h3>Summary</h3></p>
                   <ul>
                        <li>sample</li>
                    </ul>
    </section>

    <section id="tab2">
        <h2><a href="#tab2">Content</a></h2>
         <p>Long Text Goes Here</p>
    </section>

    <section id="tab3">
        <h2><a href="#tab3">References</a></h2>
        <p>This content appears on tab 3.</p>
    </section>

    <section id="tab4">
        <h2><a href="#tab4">Authors</a></h2>
        <p>This content appears on tab 4.</p>
    </section>

</article>
</div>

Answer 1

欢迎来到SO，

您可以尝试使用overflow css属性来处理内容如果溢出包含元素的边框应该如何操作，并为内容添加高度（因此它将具有上述内容边界限制）具体如下：

将您的内容包装到包含元素中，例如<div class="sectionContent">：

....
<section id="tab1">
    <h2><a href="#tab1">Summary</a></h2>
    <div class="sectionContent"> 
        <h3>Summary</h3>
        <p>Long text here</p>
        ....
        ....
    </div> // div.sectionContent closed
</section>
....

然后在碗中添加一些CSS以使其工作：

.sectionContent{
    overflow-y : scroll;
    height : 15em;
    color:#000;
}

评论：我还在此类的CSS中添加了color属性，因为您引用了部分＆gt; p（在这种情况下，您在这些部分中没有任何直接的p子项，它们实际上是section > .sectionContent > p。）

在html选项卡中管理长文本块

1 个答案: