Tab Text, statt Verlaufsmaske Ellipsis/Auslassungspunkte - kleines Problem

  • Firefox-Version
    115.2esr
    Betriebssystem
    macOs 10.13.6

    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! :)


    Einmal editiert, zuletzt von Horstmann (4. September 2023 um 13:36)

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

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

    .

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