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

Managing long text block in a html tab

本文关键字：文本 html 选项 管理      更新时间：2023-09-26

我有大量页面，其中包含不同长度的长文本（1000字以上），我仅使用CSS将这些文本分隔为逻辑选项卡（摘要、内容、参考文献和作者）。"内容"选项卡的文本比其他选项卡多得多，用户最终仍然会疯狂地滚动来阅读所有内容。

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

我也不想浏览所有内容并手动输入内容部分的断点，因为内容可能会频繁更改。

关于如何拆分"内容"部分以允许4个选项卡导航并显示内容而不必滚动，有什么想法吗？

我创建了一个代码笔，其中有一个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>

欢迎使用SO，

您可以尝试使用overflowCss属性，该属性处理内容在溢出包含元素的边界时的行为，并为内容添加高度（因此它将具有上述内容边界限制），如下所示：

将内容包装到包含元素中，例如<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;
}

注释：我还将color属性添加到这个类的CSS中，因为您引用的是section>p（因为在本例中，这些section中没有任何直接的p子级，它们实际上是section > .sectionContent > p。）

相关文章：