Zeilenumbruch bei runden Ecken
n.o.w.
- css
2 M.0 n.o.w.
2 tk0 n.o.w.0 1UnitedPower0 Matthias Apsel0 n.o.w.
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.
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.
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..
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,
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..
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;
?
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
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/
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 ;)
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.
@@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'