n.o.w.: Zeilenumbruch bei runden Ecken

Hallo Leute, ich habe ein Problem mit dem Zeilenumbruch in DIVs mit runden Ecken: Der Text wird bei mir nicht an der Kreislinie umgebrochen, sondern läuft bis zu den geraden Kanten. Lässt sich das ändern? Ziel ist es, Texte in kreisförmigen DIVs anzuzeigen.
Nach allem, was ich bisher finden konnte, ist das nicht möglich, aber so schnell wollte ich nicht aufgeben..

Vielen Dank schon mal für Eure Antworten.

  1. Mahlzeit,

    Hallo Leute, ich habe ein Problem mit dem Zeilenumbruch in DIVs mit runden Ecken: Der Text wird bei mir nicht an der Kreislinie umgebrochen, sondern läuft bis zu den geraden Kanten.

    Ich würde sagen, es liegt daran, dass dein div immer noch die Form eines Rechtecks hat, auch wenn der Rand anders angezeigt wird. Ich sehe das wie ein Blatt Papier auf das ein Kreis gemalt wird. Die Form des Papiers ändert sich dadurch nicht.

    --
    42
    1. Mahlzeit,

      Hallo Leute, ich habe ein Problem mit dem Zeilenumbruch in DIVs mit runden Ecken: Der Text wird bei mir nicht an der Kreislinie umgebrochen, sondern läuft bis zu den geraden Kanten.

      Ich würde sagen, es liegt daran, dass dein div immer noch die Form eines Rechtecks hat, auch wenn der Rand anders angezeigt wird. Ich sehe das wie ein Blatt Papier auf das ein Kreis gemalt wird. Die Form des Papiers ändert sich dadurch nicht.

      Danke erstmal, das denke ich auch, ich hatte trotzdem die Hoffnung, dass man das irgendwie einstellen kann..

  2. Hallo,

    Hallo Leute, ich habe ein Problem mit dem Zeilenumbruch in DIVs mit runden Ecken: Der Text wird bei mir nicht an der Kreislinie umgebrochen, sondern läuft bis zu den geraden Kanten.

    Dann gibt dem div doch ein padding ...

    Gruß,
    Tobias

    1. Hallo,

      Hallo Leute, ich habe ein Problem mit dem Zeilenumbruch in DIVs mit runden Ecken: Der Text wird bei mir nicht an der Kreislinie umgebrochen, sondern läuft bis zu den geraden Kanten.

      Dann gibt dem div doch ein padding ...

      Gruß,
      Tobias

      Hallo Tobias, danke erstmal, aber das Pudding erzeugt ja auch wieder einen rechteckigen Rahmen. Zudem wird dann auch der farbige background verschoben..

      1. Meine Herren!

        Hallo Tobias, danke erstmal, aber das Pudding erzeugt ja auch wieder einen rechteckigen Rahmen.

        Schoko- oder Vanillepudding, das ist hier die Frage.

        Das pAdding definiert den Abstand vom Inhalt zum Rahmen. Wenn eine Ecke einen Radius von 5px hat, so sorgt ein padding von 5px dafür, dass der Inhalt erst im Ursprung des Kreisausschnitts beginnt der Ecke beginnt. Es tut also genau das, was du möchtest.

        Zudem wird dann auch der farbige background verschoben..

        Hilft: box-sizing: padding-box;?

        --
        “All right, then, I'll go to hell.” – Huck Finn
        1. Om nah hoo pez nyeetz, 1UnitedPower!

          Das pAdding definiert den Abstand vom Inhalt zum Rahmen. Wenn eine Ecke einen Radius von 5px hat, so sorgt ein padding von 5px dafür, dass der Inhalt erst im Ursprung des Kreisausschnitts beginnt der Ecke beginnt. Es tut also genau das, was du möchtest.

          Genau. Also bei kreisförmigen Rahmen ist der Inhalt dann genau in der Mitte. Allerdings hat er dann auch eine Breite von Null ;-)

          Matthias

          --
          Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Bett und Bettler.

        2. Meine Herren!

          Hallo Tobias, danke erstmal, aber das Pudding erzeugt ja auch wieder einen rechteckigen Rahmen.

          Schoko- oder Vanillepudding, das ist hier die Frage.

          Das pAdding definiert den Abstand vom Inhalt zum Rahmen. Wenn eine Ecke einen Radius von 5px hat, so sorgt ein padding von 5px dafür, dass der Inhalt erst im Ursprung des Kreisausschnitts beginnt der Ecke beginnt. Es tut also genau das, was du möchtest.

          Zudem wird dann auch der farbige background verschoben..

          Hilft: box-sizing: padding-box;?

          gerne Schoko, mit Vanillesauce (sch... Autokorrektur).

          Das Problem dabei ist, dass sich das padding offenbar nicht an den gerundeten Ecken orientiert, sondern dessen ungeachtet ein Rechteck aufzieht. Dementsprechend wird bei großen Radien (bei mir 50%) ein Teil des Textes von den Ecken abgedeckt. D.h.: clipping orientiert sich an den Rundungen, Umbruch an den Ecken - ich brauche aber den automatischen Zeilenumbruch an den runden Ecken.

          Hier ein Beispiel: http://jsfiddle.net/KhyG2/

          1. Meine Herren!

            Bitte zitiere nur den Text, auf den du dich beziehst.

            Hier ein Beispiel: http://jsfiddle.net/KhyG2/

            Jetzt verstehe ich dein Problem erst richtig. Da ist padding tatsächlich machtlos, und ich möchte meinen mit gegenwärtigen CSS-Mitteln bist du auch aufgeschmissen. Die Zukunft hält aber was bereit ;)

            --
            “All right, then, I'll go to hell.” – Huck Finn
            1. OK, dann muss ich wohl manuell umbrechen, schöne Arbeit..

              Die Zukunft hält aber was bereit ;)

              Das ist genau was ich suche, die Zukunft ist spät dran. Trotzdem vielen Dank an alle.

              1. @@n.o.w.:

                nuqneH

                OK, dann muss ich wohl manuell umbrechen, schöne Arbeit..

                Nö, du kannst auch Werkzeuge wie den CSS Text Wrapper verwenden, um Elemente zu erstellen, die deinen Text in Form bringen.

                Nicht schön, aber …

                Das ist genau was ich suche, die Zukunft ist spät dran.

                Qapla'

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