0

I'm using Bulma and I have some tabs with the is-fullwidth option, however, each tab takes a different width depending on the content. I would like all tabs to keep the same size (using ellipsis on text that is too long), preferable avoiding Javascript.

An example of my tabs would be

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

Edit
The number of tabs may change (between 1 and 6) depending on the user config

angrykoala
  • 3,774
  • 6
  • 30
  • 55

1 Answers1

1

try it, you can use text-overflow and overflow to fix it.

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>
Chunbin Li
  • 2,196
  • 1
  • 17
  • 31
  • Thanks for your answer, but I forgot to mention the number of tabs can vary (from 1 to 6) – angrykoala Jun 10 '18 at 09:00
  • Modify width of li to 16.66%(100/6) – Chunbin Li Jun 10 '18 at 12:11
  • hardcoded number wont work, as the number of tabs change according to the user, I would prefer to stick to css (so no javascript to change the width) if possible – angrykoala Jun 10 '18 at 13:02
  • 1
    you can check this article [Can CSS detect the number of children an element has?](https://stackoverflow.com/a/12198561/7291379) to dynamic apply your width – Chunbin Li Jun 10 '18 at 15:28