Tab Text, statt Verlaufsmaske Ellipsis/Auslassungspunkte - kleines Problem

Horstmann

Endlich habe ich es geschafft, die Verlaufsmaske für abgeschnittenen Text auch in den Tabs zu Auslassungspunkten (...) bzw. Ellipsis umzuwandlen.

Soweit so gut; ich möchte aber auch, dass bei Textüberlauf der Close Button komplett verschwindet, um mehr Platz für den Text zu schaffen, bis man über über dem Tab hovert.

Was generell auch funktioniert - aber! - wenn die Tab Breite gerade so zwischen textoverflow und kein textoverflow liegt, springt der Tabtext bzw. Inhalt hin und her, und kann sich nicht entscheiden zwischen beiden Zuständen.

Das Problem scheint im Zusammenhang mit dem ebenfalls benutzten CSS Code für Tabs über die volle Breite zu entstehen.

Hier der Code im Testprofil; beim Testen tritt das Problem auf wenn - wie erwähnt - die Tabbreite gerade auf der Grenze ist.

Ideen und Lösungen wären sehr willkommen!

CSS

/*  TEST Tabs Ellipsis  */
  

.tab-label-container {
    mask-image: none !important;
}

.tab-label {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
}

/***  remove close button to make space for text til hover  ***/

.tabbrowser-tab:not(:hover) .tab-label-container[textoverflow] + .tab-close-button {
    visibility: collapse !important;
}

/***  tabs full width  ***/

.tabbrowser-tab[fadein]:not([style^="max-width"]) {
    max-width: 100vw !important;
}

Alles anzeigen

.DeJaVu

Das Verhalten steht hier

chrome://browser/content/tabbrowser.css

Im aktiven Tab wird das X angezeigt, sonst nicht - ab einer bestimmten Breite (kleiner werdend).

Bei Hover wirkt das hier bei mir

CSS

#tabbrowser-tabs[closebuttons="activetab"] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:hover > .tab-stack > .tab-content > .tab-close-button
{
    display: block !important;
}

Ob du noch an .tab-content was verändern musst, musst du selbst ermitteln. tab-close-button lässt sich einzeln bearbeiten, man sollte vermeiden, den irgendwo mit einzubauen, geht schief.

Horstmann

Zitat von .DeJaVu
Das Verhalten steht hier
chrome://browser/content/tabbrowser.css
Im aktiven Tab wird das X angezeigt, sonst nicht - ab einer bestimmten Breite (kleiner werdend).
Bei Hover wirkt das hier bei mir
CSS
#tabbrowser-tabs[closebuttons="activetab"] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:hover > .tab-stack > .tab-content > .tab-close-button
{
    display: block !important;
}

Vielen Dank für den Vorschlag ; wenn ich das im Testprofil meinem CSS Code von oben hinzufüge, ändert sich am Problem aber leider nichts.

Egal ob aktive oder nicht aktive Tab, der Inhalt springt an dem Übergangspunkt zwischen textoverflow und keinem textoverflow, falls der Close Button bis zum Hovern versteckt wird ( Zeile 17-18 in meinem CSS ) - und nur dann.

Die automatische Breitenanpassung vom .tab-close-button hier hatte ich auch schon umgangen, ändert aber auch nichts.

.

.DeJaVu

Kann mich nur schrittweise rantasten.

Das .tab-content setzt sich aus dem Icon, dem Label und den Close-Button zusammen, ganz nackt einfach hintereinander gestellt.

Ellipsis overflow

CSS

.tab-label
{
  margin-inline: 0;
  max-width: 100%;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

Der Close Button wird ganz stumpf mit display:none und display:block seitens Firefox aus- und eingeblendet, und kürzt die Breite vom Label, ganz stumpf. Und bis dahin springt auch nichts.

Wo ich momentan nicht in die Spur kommen, den Button vom .tab-label-container zu lösen bzw floating zu machen, sich über den Text zu setzen. Ich wüsste auch nicht, ob ich sowas schon in CSS erstellt habe in irgendeinem Style.