Probleme mit einige HTML5-Tags bei Firefox/Chrome/Chromium

juedan

FreeBSDler
Hallo Forum,

so langsam steigt mein Blutdruck.
Folgendes:
HTML:
<button class=...>
 Eingabe <wbr>löschen
</button>
Soll dieses erzeugen, wenn der Platz für den Button ausreichend ist:
+-----------------+
| Eingabe löschen |
+-----------------+

und soll dieses erzeugen, wenn der Platz für den Button nicht ausreichend ist:
+---------+
| Eingabe |
| löschen |
+---------+

Bei Chrome/Chromium/Blackberry OS10-Browser/Opera usw. funktioniert das einwandfrei. Beim Firefox 69 funktioniert das nicht.
Ist der Firefox schon so kaputt, oder schlampig bei der Umsetzung des HTML5-Standards oder was weiß ich?

Ich habe schon Tricks wie
wbr:after { content: "\00200B"; }
oder
<br class='w3-hide-large'>
ausprobiert - ohne Erfolg!

Weiß da noch jemand irgendeinen Trick, der definitiv funktioniert?

Danke im Voraus für die Antworten.

JueDan
 
Ist der Firefox schon so kaputt, oder schlampig bei der Umsetzung des HTML5-Standards oder was weiß ich?
Dafür würde sprechen, dass ich eine Seite habe, die ich nicht mehr in Vollbild sondern nur noch in kleinerem Fenster richtig dargestellt bekomme und zwar genau auf eingebettete Schaltflächen bezogen.
 
Weiß da noch jemand irgendeinen Trick, der definitiv funktioniert?
Du denkst viel zu kompliziert.

Das <wbr> ist dafür da, innerhalb von Worten einen möglichen Zeilenumbruch zu definieren.
Der Browser bricht bei Leerzeichen ganz von allein um, und das funktioniert auch:

Code:
<button style="font-size:64px;">
Eingabe löschen
</button>

Rob
 
st der Firefox schon so kaputt, oder schlampig bei der Umsetzung des HTML5-Standards oder was weiß ich?
Kann ich nicht bestätigen, bei mir funktioniert das ohne Probleme im FF.

HTML:
<button class="">
 Eingabe lös<wbr>chen
</button>
 

Anhänge

  • foo.png
    foo.png
    934 Bytes · Aufrufe: 262
Hallo und guten Abend,

danke, dass Ihr euch Gedanken macht.
Bei mir funktioniert es beim FF nicht und ich weiß nicht, warum.
Jetzt frage ich mal anders:

Wann macht <wbr/> einen Zeilenumbruch? Kann das durch CSS-Eigenschaften beeinflusst werden? Wenn ja, welche?

Ich weiß wirklich nicht, warum es beim FF nicht funktioniert und bei Chrome/Chromium/Opera/Blackberry OS10-Browser dagegen schon.
Leider ist es im jetzigen Entwicklungsstadium der Seite nicht möglich einen Link auf selbe bekannt zu geben (Copyright der Bilder u.a.).

Danke und schönen Abend noch.

PS: Gerade habe ich noch ein Screenshot gemacht: links der FF und rechtsdie Datsellung im Chromium.
 

Anhänge

  • wbr-fehler.png
    wbr-fehler.png
    692,9 KB · Aufrufe: 329
Rechts klick > Inspect Element und schauen ob auf dem Element irgendwelche CSS Attribute liegen die die Höhe oder den Umbruch beeinflussen.
Die kann man auch schön über die Checkboxen de-/aktivieren.
 
PS: Gerade habe ich noch ein Screenshot gemacht: links der FF und rechtsdie Datsellung im Chromium.

Wäre halt interessant zu wissen, welche Attribute dein Button sonst noch hat.
Aber wie gesagt, <wbr> ist in deinem Fall irrelevant, da Whitespaces grundsätzlich zum Umbrechen genutzt werden, außer natürlich du hast sowas wie white-space:nowrap definiert.

Rob
 
@gadean :Danke für den Tipp, nutze ich schon :)
@KobRheTilla :<wbr> war die Notlösung, weil FF keinen Umbruch machte und habe ich jetzt wieder entfernt. Den Bock habe ich gefunden: white-space:nowrap war für die Button-Basisklasse gesetzt. Die davon abgeleitete Klasse "login-button" hatte das Attribut white-space auf "nrmal" gesetzt. Klassischer Schreibfehler meinerseits... Mea culpa.

In diesem Zusammenhang ist es aber schon interessant, warum Chrom(e|ium) einen Umbruch bei <wbr> macht und FF nicht, wenn white-space auf nowrap gesetzt ist...

Jedenfalls Danke an alle, die sich mit mir den Kopf zerbrochen haben.
 
die sich mit mir den Kopf zerbrochen haben.
bei mir würde das zerbrechen auch nichts richtiges zu Tage fördern.
Nur zur Ergänung mal noch die Seite, die ich oben angesprochen hatte:
https://www.labanquepostale.fr/
Auf screenshots möchte ich verzichten. Man achte auf die beiden Buttons oben rechts - Mist, dann eben doch schnell mal Screenshot

screenshot-2019.09.17-172311.jpg

Also in der zweit obersten Reihe das >> Menu | (Such) | Mes Contacts | Me Connecter | << und achte mal darauf, wie sich das bei Wechsel der Zoomgröße (also STRG +/-) oder dem Wechsel zwischen Fenster und Vollbild verändert. Beim FF, nicht bei Cliqz oder Midori, die ich als alternative Browser noch installiert habe.

Ist vielleicht eine ganz andere Ursache. Nur der Vollständigkeit halber. FF scheint derzeit hier schon was anders zu machen (was früher nicht so war).
 
Zurück
Oben