michat: Listenpunkt: Zeilenumbruch unterdrücken, lieber overflow

Hi

in einer bestehnden Liste kommt ein neuer Eintrag hinzu, der wegen seiner Länge zu einem Zeilenumbruch führt (nur im FF; Opera, Chrome und IEs schaffen es im vorhandenen Platz).
Ich würde es vorziehen, wenn dieser Listeneintrag überfließt. Nur scheint "overflow" dafür nicht geeignet zu sein, weil es ja keinen Zeilenumbruch verhindern kann sondern nur die Anzeige eines übergroßen graphischen Elements regelt. Ich will aber die ul-Box nicht breiter machen (müssen), sondern einfach den Text dieser eine Zeile "drüberlaufen " lassen.

Gibt's dafür 'ne Lösung?

bye

MH

--
war unregistriert "michaa"
  1. Hallo,

    in einer bestehnden Liste kommt ein neuer Eintrag hinzu, der wegen seiner Länge zu einem Zeilenumbruch führt (nur im FF; Opera, Chrome und IEs schaffen es im vorhandenen Platz).

    hängt von den verfügbaren Fonts und von Kantenglättungs-Algorithmen ab. Das zeigt aber, dass der Platz ziemlich knapp kalkuliert ist.

    Ich würde es vorziehen, wenn dieser Listeneintrag überfließt. Nur scheint "overflow" dafür nicht geeignet zu sein, weil es ja keinen Zeilenumbruch verhindern kann sondern nur die Anzeige eines übergroßen graphischen Elements regelt. Ich will aber die ul-Box nicht breiter machen (müssen), sondern einfach den Text dieser eine Zeile "drüberlaufen " lassen.
    Gibt's dafür 'ne Lösung?

    white-space? Eventuell in Verbindung mit overflow.

    Ciao,
     Martin

    --
    Wenn Zeit das Kostbarste ist, was wir haben, dann ist Zeitverschwendung die größte aller Verschwendungen.
      (Benjamin Franklin, amerikanischer Tüftler und Politiker)
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
    1. @@Der Martin:

      nuqneH

      white-space? Eventuell in Verbindung mit overflow.

      … und mit text-overflow: ellipsis.

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      1. Hallo,

        white-space? Eventuell in Verbindung mit overflow.
        … und mit text-overflow: ellipsis.

        nicht wenn michat in Kauf nimmt, dass der Text ein paar Pixel über den Container hinausläuft.
        So hatte ich ihn nämlich verstanden.

        Ciao,
         Martin

        --
        Time's an illusion. Lunchtime doubly so.
          (Douglas Adams, "The Hitchhiker's Guide To The Galaxy")
        Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
  2. Hallo!

    Ich würde es vorziehen, wenn dieser Listeneintrag überfließt. Nur scheint "overflow" dafür nicht geeignet zu sein, weil es ja keinen Zeilenumbruch verhindern kann sondern nur die Anzeige eines übergroßen graphischen Elements regelt. Ich will aber die ul-Box nicht breiter machen (müssen), sondern einfach den Text dieser eine Zeile "drüberlaufen " lassen.

    overflow: visible; sollte eigentlich schon das tun was du möchtest.

    Siehe http://de.selfhtml.org/css/eigenschaften/positionierung.htm#overflow@title=overflow: "Mit overflow: können Sie bestimmen, wie übergroße innere Elemente behandelt werden."

    Das Element muss keine Grafik sein.

    Dieter

  3. Hi

    ...

    Gibt's dafür 'ne Lösung?

    Offenbar nicht, overflow:visible alleine reicht nicht aus, weil es eben keinen zeielenumbruch verhindert. Und in Kombination mit white-space:nowrap wird eben doch geklippt. Und "..." ist grundsätzlich ne interessante Lösung, aber nicht um nen stichpunktartigen Listenpunkt, dem um wenige Pixel die Luft ausgeht ins Nirvana zu verlängern.

    Ich werde wohl doch Platz schaffen müssen wo keiner ist.

    Danke für die Tipps, auch wenn's ein Schuss in den Ofen war. Jaja, ich weiß, neue Erfahrung und so weiter ..., Edison und die 1000 gefundenen Varianten nicht funktioneriender Glühbirnen Punkt Punkt Punkt

    n8

    bye

    MH

    1. Moin!

      Ich kanns eben nicht probieren, aber white-space geht wirklich nicht?

      --
      Signaturen sind blöd!
      1. Ich kanns eben nicht probieren, aber white-space geht wirklich nicht?

        Ich weiß jetzt nicht genau was du mit "geht nicht" meinst, aber mir ist es mit keiner Kombination (sprich overflom mit oder ohne white-space: nowrap) gelungen einen (text-) overflow zu erzeugen. Alle Browser klippen mit w-s:n und brechen um ohne. Wobei das Ergebnis im FF in sofern interessant ist, als er mit w-s:n die betreffende Zeile doch *ohne* Umbruch rendert *und* der Text doch vollständig in die Zeile passte, eigentlich.
        Denn Mozilla entschied sich bei derart beengten Verhältnissen in die Ecke gestellt zu fühlen und rendert deshalb als stummen Protest im Bereich des letzten Buchstabens den Rand mit. Das sieht so aus als ob man an den letzten Buchstaben ein "|" angefügt hätte und soll wohl den Ersteller auf die Platverhältnisse aufmerksam machen. Es zeigt aber auch, dass zwischen Rand und letztem Buchstabenpixel auch im FF definitiv zumindes 1px Platz ist.

        Ich will mich jetzt nicht um 1px mit Mozilla streiten, aber ärgerlich ist dieses Verhalten schon. Ich meine entweder paßt etwas oder eben nicht, schließlich gibt es ja zusätzlich zum Satzspiegel einen Margin, der ggf. für den Platz sorgen kann (und dies auch tut), den Mozilla hier beleidigt fordert. Sollte doch meine Entscheidung bleiben.

        Aggrrrrrrrrrrrr

        bye

        MH

        --
        war unregistriert "michaa"
        1. Om nah hoo pez nyeetz, michat!

          Ich will mich jetzt nicht um 1px mit Mozilla streiten,

          Bedenke, dass du keinerlei Einfluss auf die letztlich verwendete Schriftart und -größe hast.

          Zum Problem:

          Was macht white-space: nowrap nicht? Antwort - ganz unten auf der Seite.

          Also nehmen wir white-space: ???

          In Verbindung mit overflow: auto; werkelt das hier in der Noch-devel-Ansicht für übergroße Codeblöcke (Beispiel: Thread 212483, JS muss aktiviert sein)

          Wenn du overflow: visible nimmst, leistet es in Verbindung mit white-space: ??? das Verlangte.

          Matthias

          --
          1/z ist kein Blatt Papier.

          1. Hi

            Also nehmen wir white-space: ???

            "pre" schaut so aus als könnte es was ich benötige.

            Danke dir. Werde ich nachher mal testen (unter Berücksichtigung der zusammenfallenden Ränder der verschachtelten ul li ul li Hierarchie).
            Es gibt eben immer nochwas zu vergessen ;-)

            bye

            MH

            --
            war unregistriert "michaa"
          2. Wenn du overflow: visible nimmst, leistet es in Verbindung mit white-space: ??? das Verlangte.

            Mag sein, aber ich bekomme es nicht hin. white-space: pre; (für das betreffende li-Element) verhindert zwar einen Zeilenumbruch, aber trotz overflow: visible; für alle ul- und li-Elemente sowie für alle Elternelemente deren rechte Kanten hier zusammenfallen wird die Zeile geklippt. Was kann man hier noch übersehen?

            Kann ein position: relative float: left; des nebenliegenden, beschneidened Elements dafür die Ursache sein? Allerding führte auch ein testeweises z-index 2; für das beschnittene li-Element zu nichts Positivem.

            ???

            Fragen? Tipps?

            1. Om nah hoo pez nyeetz, michaa aka michat!

              Fragen?

              valider Code, doctype korrekt?

              Tipps?

              zeig die Seite.

              Matthias

              --
              1/z ist kein Blatt Papier.

              1. valider Code, doctype korrekt?

                html: ja, css: fast ja, die zwei fehler sollten jedoch zumindest für FF irrelevant sein (webkit) bzw allgemein unbedeutend (initialism, muß ich mir nochmal genauer anschauen)

                zeig die Seite.

                Ohne weitere Rücksprache mit dem Auftraggeber will ich das nicht unannonymisiert machen. Zudem ist das CSS derzeit noch eine Zumutung für fremde, gefühlte hunderttausend individuelle Formatierungen, ich weiß.
                Auf der anonymisierten siete geht es im mittelteil um den zweiten Listeneintrag, der mit den Worten beginnt "Es geht um diese Zeile ..."

                Um zumindest etwas Übersicht zu schaffen habe ich für alle ul-, li-Elemente overflow:visible und outline: red solid 1px definiert. Letzters sollte ja die Breite nicht beeinflussen und eine Weglassung ändert auch nichts.

                white-space:pre ist als inline-style angegeben, testweise. Der z-index ebenso testweise und vergeblich.

                MH

                --
                war unregistriert "michaa"
                1. Hi

                  URL nachgereicht.

                  bye

                  MH

                  --
                  war unregistriert "michaa"
                  1. Om nah hoo pez nyeetz, michat!

                    z-index für #angebot.

                    oder

                    background: transparent für #lage-kontakt

                    btw: position absolute macht Inhalte unerreichbar. Beispielsweise wenn firebug geöffnet ist.
                    Matthias

                    --
                    1/z ist kein Blatt Papier.

                    1. Hi

                      z-index für #angebot.

                      Danke, das löst das overflow Problem. Wobei mir noch nicht klar ist, warum z-index im obersten Elternelement funktioniert, nicht jedoch mit dem betreffenen Kind- und Listenelement. Das muß ich zunächstmal einfach so hinnehmen, dass diese z-index Eigenschaft eben alle folgenden Kindelemente mit anhebt. Das kann ich nachvollziehen.

                      btw: position absolute macht Inhalte unerreichbar. Beispielsweise wenn firebug geöffnet ist.

                      Du sprichst hier von der Zentrierung? Die alternative wäre eine Zentrierung durch eine Tabellenzelle (<http://de.selfhtml.org/navigation/faq.htm#mittig_zentrierte_inhalte@title=nach selfhtml> ).

                      bye

                      MH

                      --
                      war unregistriert "michaa"
                      1. Om nah hoo pez nyeetz, michat!

                        Das muß ich zunächstmal einfach so hinnehmen, dass diese z-index Eigenschaft eben alle folgenden Kindelemente mit anhebt.

                        Macht irgendwie Sinn, oder?

                        btw: position absolute macht Inhalte unerreichbar. Beispielsweise wenn firebug geöffnet ist.

                        Du sprichst hier von der Zentrierung? Die alternative wäre eine Zentrierung durch eine Tabellenzelle (<http://de.selfhtml.org/navigation/faq.htm#mittig_zentrierte_inhalte@title=nach selfhtml> ).

                        Nein. Die Doku ist nicht aktuell. http://wiki.selfhtml.org/wiki/FAQ/zentrierte_Inhalte

                        Matthias

                        --
                        1/z ist kein Blatt Papier.

        2. Hi,

          Ich weiß jetzt nicht genau was du mit "geht nicht" meinst, aber mir ist es mit keiner Kombination (sprich overflom mit oder ohne white-space: nowrap) gelungen einen (text-) overflow zu erzeugen. Alle Browser klippen mit w-s:n und brechen um ohne. Wobei das Ergebnis im FF in sofern interessant ist, als er mit w-s:n die betreffende Zeile doch *ohne* Umbruch rendert *und* der Text doch vollständig in die Zeile passte, eigentlich.
          Denn Mozilla entschied sich bei derart beengten Verhältnissen in die Ecke gestellt zu fühlen und rendert deshalb als stummen Protest im Bereich des letzten Buchstabens den Rand mit. Das sieht so aus als ob man an den letzten Buchstaben ein "|" angefügt hätte und soll wohl den Ersteller auf die Platverhältnisse aufmerksam machen. Es zeigt aber auch, dass zwischen Rand und letztem Buchstabenpixel auch im FF definitiv zumindes 1px Platz ist.

          Hast Du für die betroffenen Elemente margin/padding jeweils explizit auf 0 gesetzt?
          Und kann es sein, daß der Text jetzt zwar aus dem li überfließen kann, aber nicht aus dem ul (oder einem noch weiter oben in der Hierarchie angesiedeltem Element)?

          cu,
          Andreas

          --
          Warum nennt sich Andreas hier MudGuard?
          O o ostern ...
          Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
          1. Hast Du für die betroffenen Elemente margin/padding jeweils explizit auf 0 gesetzt?
            Und kann es sein, daß der Text jetzt zwar aus dem li überfließen kann, aber nicht aus dem ul (oder einem noch weiter oben in der Hierarchie angesiedeltem Element)?

            Es ist ein Listenpunkt in einer ul li ul li Liste. Und deine Anmerkung, dass hier mehrere Ränder zusammenfallen könnten ( und dies hier wohl der Fall ist ) ist eine weitere Inspektion des Problems wert.

            Danke!

            bye

            MH

            --
            war unregistriert "michaa"