Jusy as the title says: how to improve Firefox’ Tree Style Tabs’ CSS for multiline tabs?
The relevant part of the custom CSS that TST allows you to specify is:
/*multi line tabs*/
tab-item {
max-height: 4em !important;
overflow: hidden !important;
text-align:top;
}
tab-item tab-label {
overflow-y: hidden !important;
text-align:top;
white-space: wrap !important;
display: inline !important;
padding-top: 10px;
padding-bottom: 10px;
}
Their suggested CSS as can be seen here does seem to be enough.
The most I’ve achieved with the aforementioned CSS looks like thisl I would like to limit the text to 3 lines and keep readability:
What about -webkit-line-clamp?
/*multi line tabs*/
tab-item {
max-height: 4em !important;
overflow: hidden !important;
text-align:top;
}
tab-item tab-label {
overflow-y: hidden !important;
text-align:top;
white-space: wrap !important;
display: -webkit-inline-box !important;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
padding-top: 10px;
padding-bottom: 10px;
}
1
I ended up building on @Jordan Mann’s answer.
Here is what I came up with:
- ** removing
height:autorecovers all tabs **, before last tabs were not being shown - 2 lines per tab is enough
- adjusted label’s margin per tab.
This is perfect for me 🙂
/*multi line tabs*/
tab-item {
/*max-height: 4em !important;*/
overflow: hidden !important;
/*border: 1px solid red;*/ /*for debugging....*/
/*margin: 5px;*/ /*for debugging....*/
/*text-align:top;*/
/*height: auto;*/
margin-left:3px;
}
tab-item tab-label {
overflow-y: hidden !important;
text-align:top;
white-space: wrap !important;
display: -webkit-inline-box !important;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
margin-top: 5px;
margin-bottom: 5px;
}