Question

我正在使用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之间），具体取决于用户配置

Answer 1

尝试一下，您可以使用text-overflow和overflow来修复它。

https://jsfiddle.net/4kjvq7xp/

＆＃13;

li {
    width: 33.333%;
}

span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

＆＃13;

<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>

＆＃13;

在bulma中相同大小的选项卡

1 个答案: