Question

我想用jQuery和CSS创建能够包含换行符的文本的标签。

我尝试了几个jQuery标签插件，包括jQuery Ui的标签，但是当你插入一个换行符（例如用＆＃34; br＆＃34; -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。

Answer 1

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

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

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

以下是固定布局的小提琴：http://jsfiddle.net/VkH5R/15/

那是你在找什么？

如何使用换行符创建标签？

1 个答案: