Nbsp zwischen Bild und Text wird umbrochen

Computer: Software & Programmierung HTML & CSS
#1

Hallo,

nachdem meine erste Fragestellung und der zugehörige Code zu unverständlich waren, hier eine hoffentlich verständlichere Beschreibung. (Die Frage „HTML-Kommentar wird zu automatischem Zeilenumbruch“ also bitte vergessen.)

Ich habe also einen Hyperlink, in dem folgende Inhalte klickbar sind:

  • ein Bild (img)

  • ein no-braking-space (nbsp)

  • Text aus mehreren Wörtern

Wenn nun dieser Hyperlink im Fließtext am rechten Fensterrand zu liegen kommt, kann er nicht nur zwischen den Leerzeichen im Text umbrochen werden, sondern auch an der Stelle des No-braking-space zwischen Bild und Text. Das soll er aber nicht. Deshalb habe ich ja extra ein nbsp eingefügt.

Das Verhalten beobachte ich beim Firefox 3.5 und 3.6, beim Internet Explorer 8 trat der Zeilenwechsel nicht auf (so will ich es gern auch im Firefox haben).

Hier nun ein vollständiges Codebeispiel, wobei auch diesmal das wer-weiss-was wieder alle &…;-Codierungen trotz pre-Tags in Umlaute und normale Leerzeichen wandelt. Sorry dafür, liegt an der Technik. Deshalb muss bitte zumindest aus den von mir angegebenen „& nbsp;“ die jeweiligen Leerzeichen entfernt werden.

Außerdem tritt der o.g. Zeilenwechsel nur dann auf, wenn wirklich eine Bilddatei angezeigt wird. Existiert die Datei nicht, macht der Firefox es so, wie ich will.

bla Bitte das Browserfenster so schmal machen, dass der folgende Hyperlink umbrochen wird:

[& nbsp;Klick hier](xxx.xxx)



 Ich hatte zunächst angenommen, es läge an den HTML-Kommentaren, aber ohne diese passiert der Zeilenumbruch auch: [& nbsp;Klick hier](xxx.xxx) 
 Ich möchte nicht, dass ein Zeilenumbruch direkt zwischen Bild und dem Wort Klick stattfindet. 
 Der Firefox 2.5 bricht an der genannten Stelle gerne auch um. Der Internet Explorer 8 tut das bei mir nicht. Egal welcher Browser da grad Recht hat. Ich hätte gern einen Code, der das Umbrechen an dieser Stelle verhindert. Zwischen Klick und hier soll dagegen umbrochen werden können, wenn es am Fensterrand landet. 
 Danke.

Wie also kann ich auch dem Firefox sagen, dass er am nbsp NICHT umbrechen soll?

Danke für Tipps
Anja

#2

Tach,

gibts auch einen Link zur Seite?

Wie also kann ich auch dem Firefox sagen, dass er am nbsp
NICHT umbrechen soll?

Ich habe noch nie beobachten können, dass Firefox an einem non-breakable space umbricht. Deswegen hätte ich gerne einen Link zur Seite.

Danke,
-Efchen

#3

Hallo,

habe jetzt mit dem folgenden Code experimentiert, der den Zeilenumbruch verhindert:

[& nbsp;Klick hier](xxx.xxx)

Auch hier natürlich wieder das Leerzeichen im nbsp enfernen.

Das style-Attribut beim span würde ich später durch eine CSS-Klasse ersetzen, aber trotzdem behagt mir diese zusätzliche Auszeichnung nicht.

Oder ist das okay?

Gruß
A

#4

gibts auch einen Link zur Seite?

wie bereits früher geschrieben: Nein, den gibt’s noch nicht.

Ich habe noch nie beobachten können, dass Firefox an einem
non-breakable space umbricht.

Das tut er bei mir immer, wenn ich ein Bild-Tag und einen Text durch ein nbsp trenne.

Deswegen hätte ich gerne einen
Link zur Seite.

Dann danke ich dir schön für deine Mühe und hoffe, dass mir jemand anderes weiterhelfen kann.

Gruß
A

#5

Hallo,

danke erstmal für das beispiel !!! :smile:

also ich denke da ein element ist und dann erst text folgt (ohne element) , wird das auch umgebrochen unzwar mit dem nbsp; zusammen, ergo der text wird nicht umgebrochen, allerdings die elemente.

… mal gugen vielleicht find ich ja ne lösung die diesen optischen faktor im fliesstext hat, aber ich glaube logischer wäre schon die elemente zu gruppieren mit abstand zu arbeiten und danach erst den fliesstext. Aber wenns auch ne andere lösung tut auch gut .

P.S. ich hab mal nicht in den W3C spezifikation nachgegugt ob nun ein a tag ein element ist. Tu ich später !!!

#6

gibts auch einen Link zur Seite?

wie bereits früher geschrieben: Nein, den gibt’s noch nicht.

wie bereits früher geschrieben…ach nein, das spare ich mir jetzt.

Das tut er bei mir immer, wenn ich ein Bild-Tag und einen Text
durch ein nbsp trenne.

Ich habs mir jetzt doch mal angesehen und die Arbeit auf mich genommen, eine Seite anzulegen, in der ich das direkt testen kann.
Er bricht nicht am nbsp um, er bricht hinter dem Image um. Das nbsp bleibt erhalten, in der nächsten Zeile.

Alles andere hätte mich auch gewundert.

Aber ich kann Dir derzeit keine einleuchtende Erklärung bieten, warum das so ist. Aber mir scheint das ein normales Verhalten zu sein. Man müsste jetzt nur noch die Stelle in der W3C-Spezifikation finden, in der das steht.

Dann danke ich dir schön für deine Mühe und hoffe, dass mir
jemand anderes weiterhelfen kann.

Ein bisschen faul und wenig bemüht um die, die Dir kostenlos helfen sollen, bist Du aber in der Hinsicht schon, oder?

Schönes Wochenende,
-Efchen

#7

Hallo RakonDark,

also ich denke da ein element ist und dann erst text folgt
(ohne element) , wird das auch umgebrochen unzwar mit dem
nbsp; zusammen, ergo der text wird nicht umgebrochen,
allerdings die elemente.

Daran liegt’s nicht. Ich hab den Code eben auch ohne a-Tag ausprobiert, da macht Firefox das gleiche.

Ich hab jetzt um Bild und nbsp ein span-Tag mit white-space:nowrap eingefügt, und so geht es dann auch erst mal. Aber mir gefällt nicht, dass ich an allen relevanten Stellen diese zusätzliche Auszeichnung machen müsste.

Vielleicht gibt’s ja doch noch eine bessere Lösung.

Danke schon mal!!
Anja

#8

Tach,

gibts auch einen Link zur Seite?

Wie also kann ich auch dem Firefox sagen, dass er am nbsp
NICHT umbrechen soll?

er bricht das nbsp; ja auch nicht um, er brucht den ganzen text um da davor das element kommt welches umbricht

Ich habe noch nie beobachten können, dass Firefox an einem
non-breakable space umbricht. Deswegen hätte ich gerne einen
Link zur Seite.

Danke,
-Efchen

hier …
http://abacvs.org/oldserver/helptheworld/html/breakp…

#9

Sag mal,

warum machst denn Du in erster Linie dieses Konstrukt?
Image+Text, ist vielleicht Deine semantische Auszeichnung nicht in Ordnung? Das tendiert für mich so ein bisschen nach Definitionsliste, dann würde Dein Problem vermutlich ganz anders geartet sein. Ich meine, kaum einer braucht nbsp, oder?

#10

Man könnte auch noch drüber philosophieren, ob nbsp nicht als „physische Inhaltsauszeichnung“ durchgeht, denn dann hats im HTML-Code nichts verloren und Deine Lösung mit dem span ist die richtige.

#11

Daran liegt’s nicht. Ich hab den Code eben auch ohne a-Tag
ausprobiert, da macht Firefox das gleiche.

ok, dann ist es das bild was das macht.
text Klick hier

bricht er es nicht um :smile: bild ist also nciht gleich text , aber vielleicht kann man ja den textfluss mit float etc beeinflusssen , halt bild und so :smile:

ich gug noch …

#12

Ja, offensichtlich ist ein Umbruch nach Elementen jederzeit möglich.

Ein nbsp verhindert nur, dass an diesem Leerzeichen innerhalb von Text umgebrochen wird.

Dazu bräuchte man jetzt nur noch die Definition vom W3C.

Die Lösung mit dem span und white-space:nowrap ist also die richtige.

#13

Ja, offensichtlich ist ein Umbruch nach Elementen jederzeit
möglich.

Ein nbsp verhindert nur, dass an diesem Leerzeichen innerhalb
von Text umgebrochen wird.

Dazu bräuchte man jetzt nur noch die Definition vom W3C.

die CSS2.1 von white-space
http://www.w3.org/TR/CSS2/text.html#spacing-props

ich such aber noch weiter, ob halt ein element den text im eigentlichen sinne unterbricht.

Die Lösung mit dem span und white-space:nowrap ist also die
richtige.

#14

ich such aber noch weiter, ob halt ein element den text im
eigentlichen sinne unterbricht.

Hallo RakonDark,

ich komme auch etwas voran:

Text

wird auch umbrochen, also macht der Firefox prinzipiell nach jedem Image (auch nach anderen Einteltags) einen automatischen Zeilenumbruch, was ich persönlich bei einem inline-Element nicht erwarte. Nach anderen inline-Tags (Paar-Tags) umbricht er ja auch nicht.

Nach meinem Empfinden macht der Firefox es falsch, denn das W3C definiert das Erzeugen von Line-Breaks für HTML (Andersdefinition für XHTML habe ich nicht gefunden) folgendermaßen:

Sometimes authors may want to prevent a line break from occurring between two words. The & nbsp; entity (& #160; or & #xA0:wink: acts as a space where user agents should not cause a line break.

Und in einem vorausgehenden Hinweis auf die white spaces:

For all HTML elements except PRE, sequences of white space separate „words“ (we use the term „word“ here to mean „sequences of non-white space characters“)

„Words“ sind in dieser Beschreibung also beliebige Sequenzen ohne White Space. Ich interpretiere(!) das so, dass wenn ich in Fließtext inline-Elemente ohne white-spaces zum Text benutze, diese nicht umbrochen werden dürften.

Aber gut… die white-space:nowrap-Lösung funktioniert ja dann, und ich verzichte auf’s nbsp.

Es sei denn, du hast noch eine schicke Alternative.
:wink:

Gruß
A

#15

ich such aber noch weiter, ob halt ein element den text im
eigentlichen sinne unterbricht.

Hallo RakonDark,

ich komme auch etwas voran:

Text

wird auch umbrochen, also macht der Firefox prinzipiell nach
jedem Image (auch nach anderen Einteltags) einen automatischen
Zeilenumbruch, was ich persönlich bei einem inline-Element
nicht erwarte.

nein , beim z.b. tut er es nicht , bei schon.
display:inline; heist wirderum nur dem Zeichenfluss zu folgen und kein block element zu sein , nicht aber sich wie ein zeichen verhalten, so kann es ja auch ein padding margin etc haben, was das einzelne zeichen nicht hat ergo verhält sich ein zeichen immer anders (ohne tag).

Nach anderen inline-Tags (Paar-Tags) umbricht
er ja auch nicht.

?? wie meinst du das jetzt eigenen inhalt oder in gruppierungen (ein div inline z.b. ist ein element im text , alle kind-elemente im div ins hat kein einfluss auf den textfluss des eltern-eltern-element (oma)) ???

Nach meinem Empfinden macht der Firefox es falsch, denn das
W3C definiert das Erzeugen von Line-Breaks für HTML
(Andersdefinition für XHTML habe ich nicht gefunden)
folgendermaßen:

Sometimes authors may want to prevent a line break from
occurring between two words. The & nbsp; entity (& #160; or &
#xA0:wink: acts as a space where user agents should not cause a
line break.

Und in einem vorausgehenden Hinweis auf die white spaces:

For all HTML elements except PRE, sequences of white space
separate „words“ (we use the term „word“ here to mean
„sequences of non-white space characters“)

„Words“ sind in dieser Beschreibung also beliebige Sequenzen
ohne White Space. Ich interpretiere(!) das so, dass wenn ich
in Fließtext inline-Elemente ohne white-spaces zum Text
benutze, diese nicht umbrochen werden dürften.

ne seh ich aber anders

„word“ = hinterandergereihte nicht-lerrzeichen Zeichen. („sequences of non-white space characters“) .

womit keine elmente gemeint sind , auch keine objekte, sondern echte zeichen.

es wären sonst characters and elements. Da ein inline element zwar eingereiht wird aber eben kein character ist .

A

aber ob man nicht mal dem W3C vorschlagen kann, das elemente sich generell wie zeichen verhalten (wobei nun darauf geachtet werden muss was zeichen sind.)

den das verhalten tritt bei auch auf, nur bei z.b. nicht.

Aber gut… die white-space:nowrap-Lösung funktioniert ja
dann, und ich verzichte auf’s nbsp.

Es sei denn, du hast noch eine schicke Alternative.
:wink:

Gruß
A

Ich bin also nicht schlau genug um den gesammt überblick zu haben.

zumidest lesen die von „google chrome“ das auch so, denn dort ist es genauso , wie beim ff.

#16

https://connect.microsoft.com/IE/feedback/details/36…

das zum thema wer macht fehler und wo :smile: und wir sind wieder bei elementen die keine zeichen sind , das bestätigt sogar microsoft IE team selber.

#17

nein , beim z.b. tut er es nicht , bei schon.
display:inline; heist wirderum nur dem Zeichenfluss zu folgen
und kein block element zu sein , nicht aber sich wie ein
zeichen verhalten.

schreiben wir einfach mal ein **for ein bild element , voila , es wird nicht fetter, und bei einem _wird es auch nicht rekursive .

, was das einzelne zeichen hat ergo verhält sich

ein zeichen oft anders als ein element._**

#18

folgende hypothese :

_man könnte sagen, der parser bei microsoft, macht aus dem text mit elementen , einzelne objekte und behandelt dann alle objekte gleich.

andere browser machen erst den text bis zum (inline)element, reihen das elment ein, und weiter im text._

daraus folgt das unterschiedliche break verhalten, das erklärt auch fast den bug beim IE , das nowrap sich auf ein oma element auswirkt.
eine folge der einzelobjekt abarbeitung und gleichbehandlung von element und text als elemente als objekte.

Wissen tu ich es natürlich nicht. Aber klar ist das die Trennung eigentlich auch bei anderen vorgehensweisen immer unterscheidet zwischen zeichen , wo es auch eine zeichentabelle, fontsatz etc gibt oder eben objekte die alles mögliche sein können.

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

#19

Text

wird auch umbrochen, also macht der Firefox prinzipiell nach
jedem Image (auch nach anderen Einteltags) einen automatischen
Zeilenumbruch, was ich persönlich bei einem inline-Element
nicht erwarte.

Ist nicht auch ein Inline-Block-Element und kein Inline-Element? Ist das die entscheidende Eigenschaft eines Inline-Block-Elements?