如何创建带有换行符的选项卡？答案

【问题标题】：How to create tabs with linebreaks?如何创建带有换行符的选项卡？
【发布时间】：2016-02-04 01:10:34
【问题描述】：

我想使用 jQuery 和 CSS 创建能够包含带换行符的文本的选项卡。

我尝试了几个 jQuery 选项卡插件，包括 jQuery Ui 的选项卡，但是当您在选项卡标题中插入换行符（例如使用“br”-tag）时，所有这些插件都会弄乱布局。

现在我使用 Nicola Hibbert 的简单轻量级的 liteTabs jQuery 插件，但我认为解决方案在于 CSS 并将独立于它。

这是我的代码：

<div class="example-2">
<ul>
    <li>
        <a href="#1">
            Tab 1 line 1 <br /> 
            line.....2<br />
            line......3
        </a>
    </li>
    <li><a href="#2">Tab 2<br />&nbsp; </a></li>
    <li><a href="#3">Tab 3</a></li>
</ul>

<div name="#1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies fermentum tempor.
Maecenas rutrum augue vehicula nisi feugiat tempus. Aenean pretium fringilla eleifend.
Ut posuere vestibulum lorem quis iaculis. Nullam luctus ipsum aliquam justo convallis egestas.
</div>
<div name="#2">
Maecenas rutrum augue vehicula nisi feugiat tempus. Aenean pretium fringilla eleifend. Ut posuere vestibulum lorem quis iaculis.
Nullam luctus ipsum aliquam justo convallis egestas. Vivamus mattis nunc molestie nisi tincidunt gravida. Aliquam erat volutpat.
Donec a dolor vitae quam gravida pharetra euismod eget metus. Ut nisi quam, molestie vitae semper non, malesuada quis justo.
Quisque magna velit, eleifend hendrerit vestibulum non, dignissim sed felis.
</div>
<div name="#3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies fermentum tempor.
Maecenas rutrum augue vehicula nisi feugiat tempus. Aenean pretium fringilla eleifend. Ut posuere vestibulum lorem quis iaculis.
Nullam luctus ipsum aliquam justo convallis egestas. Vivamus mattis nunc molestie nisi tincidunt gravida. Aliquam erat volutpat.
Donec a dolor vitae quam gravida pharetra euismod eget metus. Ut nisi quam, molestie vitae semper non, malesuada quis justo.
Quisque magna velit, eleifend hendrerit vestibulum non, dignissim sed felis.
</div>
</div>

示例是 jsfiddle 的 here。

【问题讨论】：

由于新的 HTML5 标准，简单地使用
而不是
会更好。第二个版本同样好用。但它来自 xhtml。
感谢您提供此信息。不幸的是，当使用
而不是
时，jsfiddle 中的语法高亮显示“未闭合”标签。

标签： jquery css tabs

【解决方案1】：

为了防止布局中断，您需要为无序列表 (UL) 元素添加固定高度。然后，您可以将列表项 (LI) 和锚标记 (A) 设置为 100%。

将以下 CSS 规则添加到您的 CSS 应该可以解决布局问题。你只需要决定你的标签有多大：

ul { height: 56px; }
li { height: 100%; }
a { height: 100%; }

这是一个固定布局的小提琴：http://jsfiddle.net/VkH5R/15/

这就是你要找的吗？

【讨论】：

如果我们可以预先估计选项卡的高度，这个解决方案实际上几乎可以工作，为了使其更具动态性，无论您更改什么，您都可以使用脚本自动设置所有值选项卡的文本以及字体大小...查看此演示 jsfiddle.net/viphalongpro/VkH5R/16
如果不使用 JavaScript 计算高度，然后在事后操作 DOM，我想不出另一种方法来解决这个问题。在 CSS 中，为了将子元素拉伸到其父元素高度的 100%，父元素需要为高度集定义一个值。