Impressum Suchfunktion

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


CSS-Befehl <wordbreak: >
#1
Hier wird das Thema aus einem anderen Thread ( http://www.nof-schule.de/forum/t-mobiris...#pid119019 ) fortgeführt, in dem es eigentlich um ein anderes Thema ging:
@Tommy: Ich habe in solchen Fällen immer <wbr> verwendet, um das Wort sinnvoll abzutrennen. Nur der Bindestrich fehlt dann natürlich!
Keine Zeit, muss Haare machen!
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#2
Ja, aber das ist ja ein HTML Tag und keine CSS-Anweisung.

Im Gegensatz zu dem gezielt gesetzten <wbr> wird "word-break" ja eigenständig an der Stelle des notwendigen Umbruchs angewendet - also wenn ich z.B. ein prozentual angelegtes Objekt (meinetwegen eine Tabellenzelle) habe, dann kann ich ja nicht vorher wissen wann und wo der Umbruch stattfinden muss, damit mir nicht die Tabellen-Formation zerschießt - "word-break" weiß das dagegen Smiling


Teste es:

<wbr>:

https://www.w3schools.com/tags/tryit.asp...yhtml5_wbr


word-break:

https://www.w3schools.com/cssref/tryit.a...word-break


Das ist auch nur für extrem wenig Platz und sehr lange Worte gedacht, die dann eben dennoch nicht mehr sinnvoll getrennt werden können.

Das wusste Mary Poppins schon :D

Supercalifragilisticexpialigetisch
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#3
Kann man dem <wordbreak: > nicht sinnvolle Regeln geben?
Keine Zeit, muss Haare machen!
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#4
... gucke unter "Property Values" (unten) auf dieser Seite:

https://www.w3schools.com/cssref/css3_pr_word-break.asp

Nur diese Regeln sind möglich:

Code:
word-break: normal|break-all|keep-all|initial|inherit;
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#5
Das habe ich gesehen, aber hilfreich wäre eine Trennung nach Duden oder so ähnlich. Cool
Keine Zeit, muss Haare machen!
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#6
Warum sich so viel Arbeit machen mit dem <wbr>? und bei responsive Seiten was soll man da anpassen, jedes mal die Buchstaben zählen  ...
Ich verwende schon seit Jahren auf meinen Seiten diese Anweisung.

article {
hyphens: Auto;
-ms-hyphens: Auto;
-webkit-hyphens: None;
word-wrap: Break-Word;
}

Bei Chrome funktioniert das bislang nur in der englischen Sprache, wobei der Browser allgemein keine so großen Abstände zwischen den Wörtern erzeugt wie andere Browser.  https://developer.mozilla.org/en-US/docs...SS/hyphens

Wichtig ist, das man im HTML-Element <html> das Attribut lang="de" hinzufügt, denn erst dann trennt der Firefox die Zeichen korrekt.
Gruß Werner
werner-zenk.de - Tipps und Lösungen rund um HTML, CSS, JavaScript und PHP

„Effekte beeindrucken vielleicht einmal - Inhalt und Service jedoch ein Homepage-Leben lang.”

Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#7
Danke Werner für den Hinweis. Meine Versuche sind aber bislang gescheitert:

.png  2017-08-25.png (Größe: 91,88 KB / Downloads: 11)


.png  2017-08-25 (1).png (Größe: 100,55 KB / Downloads: 11)
Keine Zeit, muss Haare machen!
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#8
... nenne mal die Class

Code:
.trennung {

}

und das "lang=de" hat im <p> Tag nichts zu suchen, das gehört in das <html> Tag, also so:

Code:
<!DOCTYPE html>
 <html lang="de">
   <head>
      ... bla, bla, bla

Das geht aber in Mobirise nicht. Mobirise bietet keine Möglichkeit das <html> Tag zu ändern Sad


... das Wort, das getrennt werden soll, muss auch ein deutsches Wort sein und nicht ein Fantasiewort.


... ob die Browser das mit dem alten Meta-Tag erkennen weiß ich nicht (Werner Du?).

Kannst es ja mal probieren, das gehört dann "Inside <head> code".

Code:
<meta http-equiv="Content-Language" content="de">
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#9
Die Browser Microsoft Edge und I. Explorer trennen die Wörter auch ohne Attribut-Angabe.
<meta http-equiv="Content-Language" content="de"> funktioniert im Firefox 57 leider nicht.

Zitat:Das geht aber in Mobirise nicht. Mobirise bietet keine Möglichkeit das <html> Tag zu ändern
selbst mit dem Code-Editor nicht Huh https://www.w3schools.com/tags/ref_language_codes.asp

<body lang="de"> Das funktioniert im Firefox - https://wiki.selfhtml.org/wiki/HTML/Univ...ibute#lang
Gruß Werner
werner-zenk.de - Tipps und Lösungen rund um HTML, CSS, JavaScript und PHP

„Effekte beeindrucken vielleicht einmal - Inhalt und Service jedoch ein Homepage-Leben lang.”

Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#10
leider kommt man auch nicht an das <body> Tag in Mobirise ran - was nicht heißt, dass man das nicht "händisch" machen könnte - nur ist das eben sehr umständlich und man müsste es dann immer wiederholen, weil Mobirise das <body> Tag mit jeder Publizierung wieder überschreiben würde.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#11
Das dachte ich mir bereits, also kann man mit dem Editor den Quelltext nicht völlig frei editieren ...
Das geht Notfalls auch mit: <p lang="de"> oder <div lang="de">
Gruß Werner
werner-zenk.de - Tipps und Lösungen rund um HTML, CSS, JavaScript und PHP

„Effekte beeindrucken vielleicht einmal - Inhalt und Service jedoch ein Homepage-Leben lang.”

Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#12
@Werner - vielen Dank für diese Tipps thumbs up

Das funktioniert einwandfrei  Shy

Ich habe es hier mal in Mobirise eingebaut:

http://www.mobirise-tutorials.com/word-wrap.html


P.S.:

... sorry - ich sehe leider gerade erst ...

... es scheint nur im IE11 und Firefox 55 zu funzen - im Edge oder Chrome nicht Sad
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#13
Das habe ich bereits geschrieben, beim Chrome funktioniert das nur mit der englischen Sprache.
Auf meiner Site funktioniert das im Edge-Browser:

.png  edge_hypens.png (Größe: 28,81 KB / Downloads: 8)
Gruß Werner
werner-zenk.de - Tipps und Lösungen rund um HTML, CSS, JavaScript und PHP

„Effekte beeindrucken vielleicht einmal - Inhalt und Service jedoch ein Homepage-Leben lang.”

Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#14
Danke Werner thumbs up

... ich hatte das vorhin offensichtlich nicht ganz richtig geschrieben - genauso ist es - es geht auch hier im Edge (nur in Deutsch im Chrome nicht).
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren




Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!