Text bleibt nicht im Container, Text rutscht aus DIV Einstellungen

[Claudia]

Hallo,

ich habe erneut ein kleines Problem. Ich habe einen DIV-Container, in den ich Text lege, den sich ein User kopieren können soll. Dieser Text hat kaum Leerzeichen. Das hat zur Folge das er die Grenzen des DIV-Containers sprengt, er geht also über den rechten Rand des Containers und der Seite hinaus.
Im IE wird der Text umgebrochen dargestellt, im Firefox nicht. Kennt ihr das Problem? Könnt ihr mir sagen wie man das richtig schreibt, damit das nicht passiert? Ich habe keine Lösung trotz SELFHTML gefunden.

Danke sehr

Der Beitrag wurde von Claudia bearbeitet: 13.08.2005 - 9:17

[Conny]

Hi,
könntest Du zur Verdeutlichung den Quetext dieser Seite mal einstellen?

cu
Conny

[Auge]

Hallo

ich habe erneut ein kleines Problem. Ich habe einen DIV-Container, in den ich Text lege, den sich ein User kopieren können soll. Dieser Text hat kaum Leerzeichen. Das hat zur Folge das er die Grenzen des DIV-Containers sprengt, er geht also über den rechten Rand des Containers und der Seite hinaus.
Im IE wird der Text umgebrochen dargestellt, im Firefox nicht. Kennt ihr das Problem?

Du hast für das <div> eine Breitenangabe gemacht?
Dann liegt es höchstwahrscheinlich daran, dass der MSIE width wie min-width behandelt.

Beispiel: ein <div> mit width:600px;, background-color:#ff4; und einem Rand border:1px solid;.

Wenn der Inhalt breiter als 600px ist, wird das <div> im MSIE um so viel breiter dargestellt, wie sich der Platzbedarf erhöht hat.
Im Mozilla/Firefox und im Opera ragt der Inhalt über das <div> hinaus.

Um den selben Effekt zu erzielen, wie ihn der MSIE fälschlicherweise bei width darstellt, braucht es die Angabe von min-width.

Also:
- zuerst für den MSIE: width:600px;
- dann für die moderneren Browser die Breite auf den Standardwert zurücksetzen: width:auto; [1]
- zu guter Letzt die Mindestbreite festlegen: min-width:600px;

[1] Die Angabe width:auto; muss natürlich vor dem MSIE versteckt werden. Dies kann mit einer CSS-Browserweiche erwirkt werden, die den Umstand ausnutzt, dass viele Browser (so zum Beispiel der MSIE (bis V 6)) bestimmte Eigenschaften und Möglichkeiten von CSS nicht kennen.

Tschö, Auge

[i.b.g]

Hallo,

man kann auch versuchen, das "normale" Verhalten der Browser beim Zeilenumbruch zu ändern.

Versuche mal folgendes:

QUELLTEXT

<div style="white-space:line-wrap;width:200px;border:1px solid red;">
white-space:nowrap  white-space:nowrap white-space:nowrap  white-space:nowrap white-space:nowrap  white-space:nowrap white-space:nowrap  white-space:nowrap white-space:nowrap  white-space:nowrap white-space:nowrap  white-space:nowrap white-space:nowrap  white-space:nowrap white-space:nowrap  white-space:nowrap white-space:nowrap  white-space:nowrap white-space:nowrap  white-space:nowrap white-space:nowrap  white-space:nowrap white-space:nowrap  white-space:nowrap white-space:nowrap  white-space:nowrap white-space:nowrap  white-space:nowrap white-space:nowrap  white-space:nowrap white-space:nowrap  white-space:nowrap white-space:nowrap  white-space:nowrap white-space:nowrap  white-space:nowrap white-space:nowrap  white-space:nowrap white-space:nowrap  white-space:nowrap white-space:nowrap  white-space:nowrap white-space:nowrap  white-space:nowrap white-space:nowrap  white-space:nowrap
  white-space:nowrap  white-space:nowrap
    white-space:nowrap  white-space:nowrap
     white-space:nowrap  white-space:nowrap
</div>

Der Text wird an passenden Stellen so umgebrochen, dass er im DIV Platz hat.

Der Beitrag wurde von i.b.g bearbeitet: 13.08.2005 - 16:30

[Claudia]

Ich hatte für den Container gar keine Breite angegeben, auch keine Minimumbreite. Mit width: auto; und der Angabe einer mindestbreite mit min-width: 600px; oder so ändert sich auch nichts. Der Text fließt rechts raus.

Meine Definition für <div> sieht so aus:

QUELLTEXT

DIV
{
       FONT-WEIGHT: 100;
       FONT-SIZE: 10pt;
       COLOR: black;
       FONT-FAMILY: MONOSPACE, Arial;
       BACKGROUND-COLOR: #e0e0e0;
       TEXT-ALIGN: left;
       BORDER: 1px steelblue solid;
       padding-top: 3px;
       padding-right: 10px;
       padding-bottom: 3px;
       padding-left: 10px;
       width:auto;
       min-width:600px;
}

Der <div>-Container z.B. so:

QUELLTEXT

<div>Dies_ist_ein_Text,_der_innerhalb_eines_DIV-Containers_angezeigt_werden_soll_und_der_keinerlei_Leerstellen_inne_hat,_so_das_
der-text_am_rechten_Rand_nicht_umgebrochen_wird.</div>

Hier im Forum fließt der Text auch rechts raus. Sorry, ist nur in der Vorschau des Posts so, sonst nicht.

Eine Webseite habe ich noch nicht, bisher läuft alles erst auf Localhost.

Nachtrag: Den Post von i.b.g. habe ich erst nach meinem gelesen. Werds mal probieren.

Der Beitrag wurde von Claudia bearbeitet: 13.08.2005 - 16:59

[Claudia]

Nochmals meine Frage, weiß da keiner Abhilfe? Bitte

[i.b.g]

Hallo,

nach meiner Erfahrung ist das auch nicht lösbar. Umbrüche finden im allgemeinen an white-space-Zeichen statt. Einen Umbruch, so wie Du Ihn möchtest, den gibt es wohl höchstens in Textverarbeitungssystemen; wir beschäftigen uns hier aber mit HTML. Was hindert Dich, white-space-Zeichen einzubauen? Was ist mit dem Angebot eines Downloads? Es gibt doch Alternativen.

Der Beitrag wurde von i.b.g bearbeitet: 14.08.2005 - 8:58

[Claudia]

2 OT-Fragen vorweg: Habe schon wieder keine Benachrichtigung bekommen obwohl ich das eigentlich aktiviert hatte. Warum? Bei Antworten gibt es keine Option dazu, wurde ich deshalb nicht benachrichtigt?
Warum kann ich deinen Beitrag nicht quoten? Aus +quote in blau wird ein -quote in rot? Was hat es damit auf sich?

Umbrüche finden im allgemeinen an white-space-Zeichen statt.

Jetzt muss ich ganz dumm rüber kommen. Ich kenne die CSS-Angabe white-space: nowrap, was aber ist ein white-space-Zeichen?
Mit white-space: nowrap; funktioniert es nicht.

Einen Umbruch, so wie Du Ihn möchtest, den gibt es wohl höchstens in Textverarbeitungssystemen; wir beschäftigen uns hier aber mit HTML.

Warum kann der Sch.... IE das darstellen und Firefox nicht? Warum funktioniert die Anzeige mit Firefox hier im Forum? Es gibt also eine Lösung, nach der Suche ich nur. Geht das nur mit PHP?

Was ist mit dem Angebot eines Downloads? Es gibt doch Alternativen.

Werd ich dann wohl so machen müssen -> Mehraufwand

Danke für eure Bemühungen bisher

[i.b.g]

Hallo,

Ich kenne die CSS-Angabe white-space: nowrap, was aber ist ein white-space-Zeichen? Mit white-space: nowrap; funktioniert es nicht.

Das sind Zeichen wie Leerzeichen, Tabulatoren, Zeilenendezeichen usw., die eine Bedeutung haben aber nicht dargestellt werden.

Warum kann der Sch.... IE das darstellen und Firefox nicht?

Nun, das war ja schon öfter Thema, und liegt ganz einfach daran, dass manche Browser eher den Recommendations (Empfehlungen) des W3C (WWW-Consortium) folgen als andere. Wenn Du etwas mehr darüber erfahren möchtest, dann empfehle ich die die Seiten des >> W3C << oder für CSS die deutsche, gute Seite >> CSS4YOU <<.

Nun, nach ein wenig überlegen, fällt mir da noch die Eigenschaft overflow ein. Mit dem Wert auto sollte der DIV dann Scrollbalken anbieten; mit dem Wert hidden wird der überstehende Text abgeschnitten, was aber zum Kopieren für den Nutzer ungewohnt ist. Ich würde overflow:auto; versuchen.

Schau bei CSS4YOU rein.

[edit]
Ich habe mir das noch mal im IE angesehen. Der IE kann es auch nicht wirklich. Er bricht aber an manchen Stellen um, an denen es andere Browser nicht tun, wie z.B. Bindestrichen/Minuszeichen o.ä.
[/edit]

Der Beitrag wurde von i.b.g bearbeitet: 14.08.2005 - 16:07

[Claudia]

overflow:auto;

Danke sehr

[Google Bot]