Schriftgröße in Wortbreite

[Pitter]

Hallo zusammen,

Ich habe folgendes Problem: Ich möchte gerne von der länge eines Wortes auf seine Breite in Pixel schliessen.

zum Beispiel: Mein Text ist mit Arial 12 Pixel formatiert. Das Wort hat 5 Buchstaben. Wie Breit ist das Wort?

Gibt es da eine bekannte Formel?

Das ganze soll dem Ziel dienen, dass ich einen Text auf seine Breite büerprüfen möchte. Wenn der Text zu breit ist soll er entsprechend abgeschnitten werden und am Ende noch '...' angehängt werden. Vielleicht gibt es dafür ja auch noch einen ganz anderen Ansatz.

gruß,
Pitter

[Struppi]

Ich habe folgendes Problem: Ich möchte gerne von der länge eines Wortes auf seine Breite in Pixel schliessen.

Im Prinzip theoretisch ja, wenn dieses Wort in einem Element steht. Innerhalb eines Text, nein.

Das ganze soll dem Ziel dienen, dass ich einen Text auf seine Breite büerprüfen möchte. Wenn der Text zu breit ist soll er entsprechend abgeschnitten werden und am Ende noch '...' angehängt werden. Vielleicht gibt es dafür ja auch noch einen ganz anderen Ansatz.

relative Angaben und/oder mit CSS overflow hidden/auto.

Struppi.

[Pitter]

Ich habe folgendes Problem: Ich möchte gerne von der länge eines Wortes auf seine Breite in Pixel schliessen.

Im Prinzip theoretisch ja, wenn dieses Wort in einem Element steht. Innerhalb eines Text, nein.

Der Text steht innerhalb eines Divs, und als Wort betrachte ich den gesamten Text innerhalb des Divs.

Das ganze soll dem Ziel dienen, dass ich einen Text auf seine Breite büerprüfen möchte. Wenn der Text zu breit ist soll er entsprechend abgeschnitten werden und am Ende noch '...' angehängt werden. Vielleicht gibt es dafür ja auch noch einen ganz anderen Ansatz.

relative Angaben und/oder mit CSS overflow hidden/auto.

mit overflow könnte ich den zu langen Textteil verstecken. Aber ich möchte gerne dann am Ende des sichtbaren Textteils 3 Punkte einfügen

Struppi.

[Struppi]

Im Prinzip theoretisch ja, wenn dieses Wort in einem Element steht. Innerhalb eines Text, nein.

Der Text steht innerhalb eines Divs, und als Wort betrachte ich den gesamten Text innerhalb des Divs.

Dann suchst du .offsetWidth des DIV Elementes. Das mit den drei Punkten wird schwieriger, da du dann immer noch nicht weißt wo du die Punkte einbauen musst.

Struppi.

[dicon]

Guden Morgen,

nur mal in die Tüte gedacht: overflow:auto - Kann man den Punkt bzw. der Zeichen
abfangen, der/das bei zu langem Text zum Anzeigen der Scrollbars führt? Wenn ja,
wäre das vielleicht ein Ansatz.

Grüße, dicon

PS: Man sieh sowas ja gelegentlich mal bei News: Headline + kurzer Teaser-Test+ more... - wie wird das da gelöst, händisch im CMS?

[qqq]

PS: Man sieh sowas ja gelegentlich mal bei News: Headline + kurzer Teaser-Test+ more... - wie wird das da gelöst, händisch im CMS?

jain, das lässt sich auch automatisieren (CMS schneidet nach x-tem Wort ab), schau mal in den Seitenquellcode. Bei einer von dir angedachten JavaScript-Lösung müsste ansonsten der komplette Text da stehen.

[Jonathan]

Hallo dicon,

nur mal in die Tüte gedacht: overflow:auto - Kann man den Punkt bzw. der Zeichen
abfangen, der/das bei zu langem Text zum Anzeigen der Scrollbars führt? Wenn ja,

Eher nicht. Das ausmessen eines (unsichtbaren) <span>s ist jedenfalls deutlich einfacher.

PS: Man sieh sowas ja gelegentlich mal bei News: Headline + kurzer Teaser-Test+ more... - wie wird das da gelöst, händisch im CMS?

Entwerder händisch oder automatisiert, z.B. über PHP. Da kommts dann aber auch nicht aus die Zeilenumbrüche an, sondern es wird z.B. einfach nach 50 Wörtern, 5 Sätzen oder 2 Absätzen oder sonst welchen Bedingungen abgebrochen.

Jonathan

[Steel]

Hi,

PS: Man sieh sowas ja gelegentlich mal bei News: Headline + kurzer Teaser-Test+ more... - wie wird das da gelöst, händisch im CMS?

Ich kenne z.B. eine Manuelle Loesung die folgendermassen aussieht:  Beim eingeben des Textes gibt es 2 Felder. Im Ersten Feld schreibt man den Teaser Text bzw. Den Anfang und in das zweite Feld dann den Kompletten Artikel. Je nach CMS Fuegt das Prog den Artikel dann aus beiden Feldern zusammen oder der Teaser ist wirklich nur das: ein Teaser, dessen Inhalt dann auch in die 2. Box uebernommen (kopiert) werden muss.

Automatische Tools zaehlen meist Buchstaben, Woerter, Absaetze,... Ich kenne kein CMS das die Breite misst. Woher denn auch? Woher soll den Javascript, HTML, Php,... wissen wie breit ein W in einer speziellen Schriftart ist? Das geht nur bei Monotype-Schriften. Immer vorrausgesetzt natuerlich der User verfuegt ueber diese Schriften oder hat kein eigenes Stylesheet. (und das gleiche Betriebssystem)

Du kannst dir sicherlich die Muehe machen und fuer eine bestimmte Schriftart jeden Buchstaben auszumessen. Damit kannste dan rechnen. Nur was nuetzt es Dir?

[qqq]

zum Beispiel: Mein Text ist mit Arial 12 Pixel formatiert. Das Wort hat 5 Buchstaben. Wie Breit ist das Wort?

dazu müsstest du jetzt noch wissen, um welches Wort es sich handelt, da in Arial jedes Zeichen seine eigene Breite hat.
Sowas lässt sich also in vertretbarem Aufwand nur mit monospace (= eine Schriftart mit dicktengleichen Zeichen) erreichen.

Ein Textkästchen mit fester Breite und der CSS-Eigenschaft overflow tut's nicht?

[Jonathan]

Hallo Pitter,

zum Beispiel: Mein Text ist mit Arial 12 Pixel formatiert. Das Wort hat 5 Buchstaben. Wie Breit ist das Wort?

wwwww dürfte breiter sein als iiiii. Meines Wissens kriegt man das aber nur raus, indem dem man d.B. einen <span> entsprechend formatiert, mit Text füllt und hinterher die Breite ausliest.

Jonathan

[Pitter]

wow, das geht ja alles Schnell hier...

Ich weiß das das Ganze etwas aufwendig ist, und das es nur ein Näherungswert sein kann. Ich möchte auch nicht das ihr jetzt für mich eine Formel entwickelt, ich dachte nur es gäbe vielleicht schon eine.

Mir würden vielleicht auch erst mal ein paar grundsätzliche informationen weiterhelfen.

Was bedeutet es, wenn eine Schrift mit der Größe 12px definiert ist? ist dann ein Buchstabe 12px hoch? oder ein ganz bestimmer 12px breit? oder wie ist das definiert?

Wenn ich die durchschnittliche Breite eines Buchstaben wüsste, hätte man ja schonmal was. Später könnte man dann ja noch die Wahrscheinlichkeit für jeden Buchstaben im Wort mit einbeziehen usw. usw.

gruß,
Pitter

[Jonathan]

Hallo Pitter,

Was bedeutet es, wenn eine Schrift mit der Größe 12px definiert ist? ist dann ein Buchstabe 12px hoch?

So ist es. Du kannst natürlich den durchschnitt etwa selbst ausrechnen, aber wie gesagt. iiiii wird deutlich dünner sein, als wwwww. Und die Schriftdarstellung wird sich auch noch je nach Betriebssystem unterscheiden.

Jonathan

[Kai345]

Grütze .. äh ... Grüße!

Wenn der Text zu breit ist soll er entsprechend abgeschnitten werden und am Ende noch '...' angehängt werden. Vielleicht gibt es dafür ja auch noch einen ganz anderen Ansatz.

Ja, aber leider noch nicht für alle Browser. Per CSS .. Opera und IE6(!) machen es, FF2 nicht:

text-overflow

Cü
Kai

[donp]

Wenn der Text zu breit ist soll er entsprechend abgeschnitten werden und am Ende noch '...' angehängt werden. Vielleicht gibt es dafür ja auch noch einen ganz anderen Ansatz.

Theoretisch denkbar wäre doch, die drei Punkte als kleine Grafik irgendwie rechts unten über dem Div-Element "schweben" zu lassen, so dass dahinter der übrige Text einfach verschwindet. Dann bräuche man ihn nicht wirklich zu kürzen und auch nichts zu messen.

Ob und wie das aber machbar ist, weiss ich (noch) nicht. Bin noch am lernen. Vielleicht hat sonst jemand eine Ahnung, wie das gehen könnte?

Ich meine jedenfalls, solche Effekte schon mal irgendwo gesehen zu haben, d.h fix auf der Seite schwebende "Teile", meistens nervige Werbung oder so...

Gruß, Don P