zu langen string mit Punkten darstellen
lima-city → Forum → Programmiersprachen → PHP, MySQL & .htaccess
anzahl
anzeigen
beispiel
bild
bringen
buchstabe
code
datei
ende
langem namen
pixel
schrift
schriftart
string
super wichtiges dokument
text
umdrehen
unterschied
url
zeichen
-
Hallo
Ich würde gerne eine Liste von Dateien in einem Ordner ausgeben. Mein Problem ist aber, dass sich die Seite verzieht wenn der Dateiname länger ist als der <div> breit ist.
Deswegen würde ich gerne den Dateinamen gekürzt darstellen, also z.B.:
01-super-wichtiges-dokument-mit-langem-namen.pdf
wird zu:
01-super-w[.....]-namen.pdf
Was ich weiß ist, dass man mit PHP nach x Zeichen etwas ersetzen kann. Wenn ich aber nur die ersten 5 und die letzten 5 Zeichen anzeigen lasse, dann gibt es bei den Dateibreiten gehörige Unterschiede (WWWWW ist breiter als iiiii).
Kann ich irgendwie den String auf eine gewisse Pixelbreite bringen? Irgendwie muss das doch gehen.
Google hilft mir da nicht viel weiter, ich fand z.B. eine Funktion, in der die Breite eines jeden Buchstaben angegeben ist und die "so ungefähr" die Breite berechnet, bloß müsste ich dann eben einzeln alles eintragen und dann kompliziert die Anzahl der Buchstaben berechnen, die noch angezeigt werden kann.
Schriftart ist übrigens Verdana mit <h2> Gewünschte Maximalbreite des Strings ist 300 Pixel.
mfg
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
voloya schrieb:
Mit PHP kannst du das nie erreichen, da du nicht sicher weißt welcher Schriftfont beim Client tatsächlich verwendet wird... du kannst mit PHP maximal den String in ein Bild rendern und das Bild zurückgeben, was aber auch nicht gut ist.
Kann ich irgendwie den String auf eine gewisse Pixelbreite bringen?
Was du maximal machen kannst ist clientseitig mit JavaScript schaun wie breit dein Container ist und dementsprechend den String darin solang verkürzen bis die Länge stimmt.
Oder du nimmst einen Fixed-Width-Font (wie Courier), dann sind alle Buchstaben gleich lang und du tust dir leichter bei der Breitenberechnung. -
voloya schrieb:
... dann gibt es bei den Dateibreiten gehörige Unterschiede (WWWWW ist breiter als iiiii).
... Schriftart ist übrigens Verdana mit <h2> Gewünschte Maximalbreite des Strings ist 300 Pixel.
doch, bei Schritart "mono" und "Courier" ist die Breite aller Buchstaben gleich
(gibt evtl auch noch andere)
CSS Beispiel:
.mytext { font-family: "Courier New", Courier, mono; }
oder direkt mit style-Attribut
<div style="font-family: "Courier New", Courier, mono;">
<br /> 5x i = iiiii
<br /> 5x W = WWWWW
</div>
BSP:
5x i = iiiii 5x W = WWWWW
Damit kannst du (durch Versuche) zumindest nahe an gewünschte Breite ran kommen
also je nach Schrift-Größe ... Testen und Zählen, wieviele Zeichen in die 300px passen
:)
PS: vielleicht gibt es ja auch was in CSS um die Breite je Buschstabe zu bestimmen
ich kenne jetzt nur letter-spacing, also für den Abstand zwischen den Buschstaben,
aber das hilft hier wohl nicht weiter
Beitrag zuletzt geändert: 10.6.2012 21:24:11 von grgiko -
Hallo
grgiko schrieb:
doch, bei Schritart "mono" und "Courier" ist die Breite aller Buchstaben gleich
(gibt evtl auch noch andere)
CSS Beispiel:
.mytext { font-family: "Courier New", Courier, mono; }
Vielen Dank! Das war zwar nicht ganz das wonach ich suchte, aber es erfüllt seinen Zweck voll und ganz. Zudem schaut die Schrift auch wesentlich besser aus als Verdana.
Wo wir schonmal hier sind, falls jemand Lust hat mir bei der Implementierung mit PHP zu helfen:
x Buchstaben + ... + x Buchstaben
1. strlen (string) > 21
2. stringneu = substr (string, 0,9) .'...';
^ damit hätte ich schonmal "9 Buchstaben + ..."
Wie bekomme ich die anderen 9? Muss ich das mit strrev umdrehen, 9 Zeichen abschneiden und wieder umdrehen oder gibt es da eine einfachere Lösung?
Vielen Dank und
mfg
-
voloya schrieb:
... Wie bekomme ich die anderen 9?...
und gegessen ;)$txt = '01-super-wichtiges-dokument-mit-langem-namen.pdf'; echo $txt = substr($txt, 0, 9) . '...' . substr($txt, -9);
ich würde allendings auf hover den ganzen namen doch noch einblenden.
Beitrag zuletzt geändert: 10.6.2012 23:04:54 von czibere -
entweder mit CSS a:hover einen Tool-Tip einblenden
oder (einfacher) direkt mit title="...." im Link
und ich würde noch prüfen, ob der Link-Name überhaupt länger ist, als gewünscht
BSP ein solcher Link-Name darf max. 21 Zeichen lang sein (9 + 3 + 9) (die 3 ist für ...)
$files_dir = 'dateien/'; $max_zeichen = 21; $long_name = 'super-wichtiges-dokument-mit-langem-namen.pdf'; // ---- 45 Zeichen if (strlen($long_name) > $max_zeichen) { $short_name = substr($long_name, 0, 9) . '...' . substr($long_name, -9); } else { $short_name = $long_name; } $link_ausgabe = "<a href=\"".$files_dir.$long_name."\" target=\"_blank\" title=\"".$long_name."\">".$short_name."</a>"; echo "<div class=\"linkbox\">\n"; echo "<span class=\"mytext\">".$link_ausgabe."</span>\n"; echo "</div>\n";
Ergebnis:
(Link-Text mit 21 Zeichen = 9 + 3 + 9)super-wic...namen.pdf
<div class="linkbox"> <span class="mytext"><a href="dateien/super-wichtiges-dokument-mit-langem-namen.pdf" target="_blank" title="super-wichtiges-dokument-mit-langem-namen.pdf">super-wic...namen.pdf</a></span> </div>
ohne die Prüfung, ob der Link-Name größer als die maximale Zeichenlänge ist
würde ein eigentlich passender Links evt. blöd zerschnippelt ...
BSP: (Link-Name mit 17 Zeichen)
kurz_linkname.pdf
würde zu: (21 Zeichen)
kurz_link...kname.pdf
also sogar 4 Zeichen länger
weil bestehend aus: 9 Zeichen von vorne, dan ..., dann 9 Zeichen von hinten (9 + 3 + 9)
auch wäre das k dann sogar doppelt :(
also wenn die Anzahl der Zeichen kleiner oder gleich (nicht größer) als die Maximal-Zeichen,
dann macht die Trennung da wohl eher keinen Sinn
Beitrag zuletzt geändert: 11.6.2012 12:48:55 von grgiko -
Du kannst die Datei einfach umbenneen oder als Link anzeigen, dann wird ein von dir eingegebener Text angezeigt.
Bsp:
<a href="datei-mit-langem-name.pdf">angezeigter Text</a> -
Sehr viel einfacher geht es mit css, wenn du keinen besonderen Wert darauf legst, dass Anfang und Ende angezeigt werden:
text-overflow: ellipsis;
white-space: nowrap;
Dies sorgt dafür, dass der Link dann in etwa so angezeigt wird:
01-super-wichtiges-dokument-m...
text-overflow: ellipsis; sorgt für die '...' am Ende und white-space: nowrap; verhindert, dass der Text umgebrochen wird. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
