灯泡中的相同大小标签
灯泡中的相同大小标签
提问于 2018-06-10 06:01:37
我正在使用Bulma，我有一些带有is-fullwidth选项的选项卡，但是，每个选项卡都根据内容采用不同的宽度。我希望所有选项卡保持相同的大小(使用省略号的文本太长)，最好避免Javascript。
我的选项卡的一个例子是
<div class="tabs is-fullwidth">
<ul>
<li>
<a>
First
</a>
</li>
<li>
<a>
A very long thing with a lot of text
</a>
</li>
<li>
<a>
Third
</a>
</li>
</ul>
</div>编辑
选项卡数可能会根据用户配置而变化(在1到6之间
回答 1
Stack Overflow用户
发布于 2018-06-10 09:44:26
试一下，你可以使用text-overflow和overflow来修复它。
https://jsfiddle.net/4kjvq7xp/
li {
width: 33.333%;
}
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}<link rel="stylesheet" href="https://bulma.io/css/bulma-docs.min.css?v=201806071228">
<script defer="" src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
<div class="tabs is-fullwidth">
<ul>
<li>
<a>
<span class="icon"><i class="fas fa-angle-left" aria-hidden="true"></i></span>
<span>Left</span>
</a>
</li>
<li>
<a>
<span class="icon"><i class="fas fa-angle-up" aria-hidden="true"></i></span>
<span>A very long thing with a lot of text</span>
</a>
</li>
<li>
<a>
<span>Right</span>
<span class="icon"><i class="fas fa-angle-right" aria-hidden="true"></i></span>
</a>
</li>
</ul>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50778893
复制相关文章
相似问题