Text Durch Zeilenumbruch AUSSERHALB container
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
angabe
code
container
eigenschaft
einblick
flexibel laufen
flexible box
helfen
hilfe
idee
jemand
nachlesen
nase
position
problem
text
url
ursache
vermutung
zeile
-
Hi, das Problem an sich klingt banal, dennoch musste ich dieses Verhalten schon öfters erleben und ich kann mir leider trotz vieler Versuche nicht die Ursache dafür erklären bzw. habe ich keine Lösung des problems gefunden obwohl ich sie wahrscheinlich direkt vor meiner Nase vermute...
Also, ich habe ein Div mit folgenden css-Eigenschaften:
background: #2e2e2e; position: absolute; right:50px; margin:0px; margin-top:5px; height:22px; padding:3px 10px 0px 10px; color: #f8f8f8; font-size:15px;
schreibe ich hier nun
DasIstEinBeispielSatzOhneUmbruchmöglichkeit
hinein, so dehnt sich der Container brav von rechts nach links aus.
Sobald aber eine Umbruchmöglichkeit (Leerzeichen) vorhanden ist (siehe text unten mit Leerzeichen), wird der Text gebrochen, der Container zeigt einen Teil innerhalb, den Rest ausserhalb:
IstDrinn istDraussen
Bildlich kann man sich das so vorstellen:
+------------------+ | ist drinn | +----istDraussen---+
gewünscht ist aber dagegen:
+--------------------------------+ | ist drinn istDraussen | +--------------------------------+
Ich hoffe jemand von Euch kennt dafür einen Trick :D
Vielen Dank und liebe Grüße
Beitrag zuletzt geändert: 11.10.2013 9:38:08 von programtools -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Als erstes der Hinweiß, mein Lösungsansatz ist wahrscheinlich alles andere als gut programmiert oder ähnliches, nur ein Einfall, wie man dein Problem lösen könnte :D
Wenn du deinem CSS-Code ein width hinzufügst, und den so einstellst, dass der Container breit genug für den Text ist, dann sollte es klappen
Also ungefähr so:background: #2e2e2e; position: absolute; right:50px; margin:0px; margin-top:5px; height:22px; width:100px; //Diese Zeile ist neu padding:3px 10px 0px 10px; color: #f8f8f8; font-size:15px;
Ich hoffe, ich konnte helfen
Beitrag zuletzt geändert: 11.10.2013 15:36:48 von anisubfinder -
anisubfinder schrieb:
Wenn du deinem CSS-Code ein width hinzufügst, und den so einstellst, dass der Container breit genug für den Text ist, dann sollte es klappen
Hi, danke für die Idee, allerdings soll sich die Breite an den Inhalt anpassen, demnach kommt eine feste width Angabe leider nicht in Frage.
Trotzdem Danke ;) -
Wäre eine relative Breite vielleicht eine Lösung?
Also die Angabe in % angeben, dann passt sich die breite immernoch an :D -
Das Problem lässt sich so aber nicht nachbauen. Es fehlen Infos über andere Formatierungen, die wahrscheinlich dieses DIV überschreiben oder beeinflussen.
Wenn ich mit diesen Angaben einen DIV Container mit Text fülle und die CSS Eigenschaften hinzufüge, kann ich haufenweise Zeichen eintippen sogar mit Leerzeichen.
Ohne mehr von dem Code zu sehen, wird es unmöglich das nachzubauen. Meine Vermutung ein anderer Container oder eine andere CSS Eigenschaft verursacht das Problem. -
kgreen schrieb:
Meine Vermutung ein anderer Container oder eine andere CSS Eigenschaft verursacht das Problem.
Hi, das kann ich ausschließen, ich habe in Firebug geschaut, der Container erbt (wie gewollt) lediglich font-styles. (Und auch wenn ich alle ererbten Styles deaktiviere tritt das problem auf.)
Lediglich könnte hilfreich sein: der Cotainer befindet sich in einem relativ positionierten Listenelement, welches wiederum in einem fix positioniertem Div liegt.
Mir scheint es eher so, als ob die Höhenangabe zwar das Div begrenzt, aber nicht auf den Textfluss wirken kann. Also anhand der Hintergrundfarbe erkennt man eine Höhe im Wert der angegebenen 22px. Nehme ich diese Eigenschaft raus, rutscht die Höhe auf die 'Tatsächliche Höhe' also der Hintergrund umschließt nun auch den zuvor hinausragenden Text. Also gibt es irgendeinen Umstand, der es dem text erlauft trotz festgesetzter Höhe sich in diese Richtung auszubreiten und das obwohl die Breite nicht fixiert ist und hier daher Ausbreitungsplatz besteht.
Ich hoffe das war nicht allzuverwirrend und das doch noch jemand eine Lösung bze Idee hat.
Vielen Dank und Grüße -
Ok, dann können wir Vererbung ausschließen.
Wie gesagt, für sich alleine macht der Container genau das was er soll. Da gibt es bei mir keinerlei Probleme.
Da du aber Verschachtelungen hast, sind diese auch dafür verantwortlich wie sich eingeschlossene Elemente zu verhalten haben bzw. wie sie begrenzt werden.
Ohne weiteren Quelltext wird dir hier keiner eine Hilfestellung geben können.
So gut sind unsere Glaskugeln noch nicht.
Beitrag zuletzt geändert: 11.10.2013 16:48:16 von kgreen -
Ich hab mich mal durch mein kleines CSS-Buch durchgewühlt und herausgefunden, du kannst entweder deinem DIV bzw. dem CSS-Code dafür ein "white-space: nowrap;" geben, das sollte den Zeilenumbruch verbieten, oder du packst den Text der nicht umgebrochen werden soll in ein <nobr></nobr>
Aber kgreen hat recht, etwas Code würde die Lösung des Problems beschleunigen
Beitrag zuletzt geändert: 11.10.2013 17:17:15 von anisubfinder -
Da ja alles flexibel laufen soll, ist ein nowrap oder nobr ja eine künstliche Hilfe.
So wie ich das verstande habe, soll sich der Container soweit ausbreiten können wie es das Layout zulässt.
-
kgreen schrieb:
Da ja alles flexibel laufen soll, ist ein nowrap oder nobr ja eine künstliche Hilfe.
Perfeckt! Genau das war die Idee die mir vor der Nase verborgen war :D Zwar ist damit die Ursache des eigentlichen Problems nicht geklärt (falls jemand dazu eine Idee hat, interesieren würde mich das ja schon...), aber es behebt mein Problem und das sehr galant.
white-space: nowrap;
Vielen Dank und Grüße! -
Na denn. Manchen ist halt leider nicht zu helfen.
Wir möchten dir ja helfen, aber ohne Einblick in dein Konstrukt geht das einfach nicht.
Das nowrap ist keine Abhilfe für dein Problem, sondern nur ein kleiner Workaround. Kurz gesagt schmuh. -
programtools schrieb: ... Perfeckt! Genau das war die Idee die mir vor der Nase verborgen war :D ...
ja und das war genau vor css3 ;)
wenn ich nicht ganz daneben bin, denke ich, dass du genau sowas brauchst: google: css3 flexible box. (wenn es nicht ist, erschlage mich bitte nicht). [du musst nachlesen bei w3c.]
gleich das zweite beispiel ist schon sehr interessant.
Beitrag zuletzt geändert: 12.10.2013 0:56:15 von czibere -
czibere schrieb:
programtools schrieb: ... Perfeckt! Genau das war die Idee die mir vor der Nase verborgen war :D ...
ja und das war genau vor css3 ;)
wenn ich nicht ganz daneben bin, denke ich, dass du genau sowas brauchst: google: css3 flexible box. (wenn es nicht ist, erschlage mich bitte nicht). [du musst nachlesen bei w3c.]
gleich das zweite beispiel ist schon sehr interessant.
Sehr interessanter Beitrag!
werde ich mich auf jeden Fall mal mit auseinander setzen!
kgreen schrieb:
Na denn. Manchen ist halt leider nicht zu helfen.
Wir möchten dir ja helfen, aber ohne Einblick in dein Konstrukt geht das einfach nicht.
Das nowrap ist keine Abhilfe für dein Problem, sondern nur ein kleiner Workaround. Kurz gesagt schmuh.
Naja, das css verursacht, dass ich in meinem text keine Zeilenumbrüche erhalte. Diese sind als Auslöser für das Problem also nicht gerade zu vernachlässigen. Also denke ich kann das so schon verwendet werden, da es ja auch keiner Logik wiederspricht:
Ich möchte text in einer Zeile -> Keine Zeilenumbrüche -> Text ist in einer Zeile.
Einblick in Konstrukte ist je nach größe manchmal nicht so einfach ;)
Vielen Dank also nochmal für die Hilfe & Anregungen! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
