[Feature request] Add option to not crop too long label of tabs

[satorym]

Currently there are two options for too long label of tabs: "fade out" and "crop with ..". Would be great to have third one: no crop.

[piroor]

When "no crop" is chosen, what should happen for too long labels? Just cut off?

[TrianguloY]

What about show it in multiple lines?

[piroor]

It looks to be done with a custom user style like:

tab-item tab-label {
  white-space: normal;
}

But please remind that it can break visual of TST's tree - TST is designed assuming that all tabs have same height. To get stable behavior and appearance, you also should expand the height of tabs https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules#change-tab-height-236-2389 , like:

tab-item tab-label {
  white-space: normal;
}

tab-item {
  --tab-size: 4em !important;
  height: var(--tab-size);
}

[irvinm]

@satorym can you close this item?

[irvinm]

@piroor I think this one can be closed.

[piroor]

I've added a new snippet: https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules#fold-too-long-tab-labels-instead-of-crop-2929

[PSalant726]

I have updated this snippet to dynamically size the tab height when wrapping tab titles: https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules#wrap-tab-titles-instead-of-cropping-2929

[emvaized]

What I find a better a solution, is to show 2 lines of text instead of one. This way you get more information, while maintaining the same height for all tabs. This could be modified to show 3 lines of text, and so on:

/* 2-line tabs */
tab-item tab-label {
   overflow: hidden;
   white-space: unset;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
           line-clamp: 2; 
   -webkit-box-orient: vertical;
}

Source

Looks like this:

@piroor Maybe worth adding to the snippets as well?

[PSalant726]

@emvaized IMO, this is a nice snippet to add to the wiki, but it solves a different problem.

[emvaized]

but it solves a different problem

I would rather say that it solves the same problem, but in a slightly different way

[PSalant726]

With your "solution", if the tab title exceeds two lines, it will still be cropped.

[wangweixuan]

With the current snippet, a wrapped tab may grow higher than its parent. When collapsed, it leaves unexpected white space.

Normal: Collapsed:

The likely reason is that TST assumes tabs have a fixed size when calculating the position of collapsed tabs: https://github.com/piroor/treestyletab/blob/fa4360353dd58d8e5cb6bc1b70d3b14bc0ce690e/webextensions/sidebar/styles/base.css#L394-L397

As a fix, I am updating the wiki so collapsed tabs are no longer wrapped:

- tab-item tab-label {
+ tab-item:not(.collapsed) tab-label {
    overflow: unset;
    white-space: unset;
  }

[PSalant726]

I include the following in my custom CSS:

tab-item:not(.pinned).collapsed.collapsed-completely {
  display: none;
}

I'm not sure if it's the best solution, but it works well for me.

[BitGrub]

How do I make it so tab titles are only wrapped when the sidebar is larger than a certain width? I've got my userChrome.css set up with this snippet to collapse the sidebar when its not in use, but text-wrapping and narrow spaces don't go very well together. I cannot figure it out