Text bei Überlänge abschneiden

[der_bob]

Hallo,
ich möchte eine Tabelle erstellen, die in einer Spalte den Namen eines Fotoalbums direkt gefolgt von einer Jahreszahl anzeigt. Darunter (in der selben Zelle) eine kurze Beschreibung. Wenn der Name oder die Beschreibung zu lang ist soll der Rest abgeschnitten werden. Die Jahreszahl soll NICHT abgeschnitten werden sondern dann am rechten Rand der Zelle angezeigt werden.

Auszug aus HTML:

<tr>  
<td>[ersteller]</td>  
<td>  
<a href="?albumid=xx"><span class="name">[Albumname]</span> ([Jahr])</a>  
<br>  
<span class="beschreibung">[Beschreibung]</span>  
</td>  
<td>[anzahl bilder]</td>  
</tr>

Auszug aus CSS:

.name {  
	display:inline-block;  
	max-width:217px;  
	white-space:nowrap;  
	overflow:hidden;  
}  
  
.beschreibung {  
	display:inline-block;  
	max-width:250px;  
	white-space:nowrap;  
	overflow:hidden;  
}  

(Links sind nur "hover-unterstrichen" siehe 2. bild 2. album)
(Hab im Firefox die Tabelle markiert damit man es deutlicher sieht)

Das ganze soll so aussehen:

Im Firefox 3.6 sieht es immerhin so aus: (man beachte die Jahreszahl)

Aber der IE schneidet nicht ab, sondern versteckt nur (die Spalte vergrößert sich um die eigentliche länge wenn nichts abgeschnitten wäre):

Also ich hab Google schon stundenlang bemüht, aber anscheinend suche ich falsch ;)
Habe anfangs mit <div> rumprobiert. Macht aber immer einen Umbruch rein. Ein <span> macht eine Verschiebung um einige Pixel. Die 'Text-Zeilen-Höhe' nimmt ebenfalls um einige Pixel zu.
Weiß hier jemand Rat? Ich bin am Verzweifeln!
Gruß

[ChrisB]

Hi,

ich möchte eine Tabelle erstellen, die in einer Spalte den Namen eines Fotoalbums direkt gefolgt von einer Jahreszahl anzeigt. Darunter (in der selben Zelle) eine kurze Beschreibung. Wenn der Name oder die Beschreibung zu lang ist soll der Rest abgeschnitten werden.

Wo und wie hast du denn die Breite der Tabellenzelle vorgegeben?

Aber der IE schneidet nicht ab, sondern versteckt nur (die Spalte vergrößert sich um die eigentliche länge wenn nichts abgeschnitten wäre):

Nun, dass ausgerechnet der IE mit overflow Probleme hat, insb. in Verbindung mit Tabellenzellen, überrascht nicht sonderlich.

Habe anfangs mit <div> rumprobiert. Macht aber immer einen Umbruch rein.

Für die Beschreibung, die eh eine eigene Zeile darstellt, wäre das ja egal. Und ich könnte mir vorstellen, dass der IE overflow mit einem block-Element etwas besser handhabt, als bei inline-block.

Ein <span> macht eine Verschiebung um einige Pixel. Die 'Text-Zeilen-Höhe' nimmt ebenfalls um einige Pixel zu.

Das wird am inline-block liegen.

MfG ChrisB

[der_bob]

Danke für die schnelle Antwort um diese Zeit :D

Wo und wie hast du denn die Breite der Tabellenzelle vorgegeben?

mit <colgoup> und festen px werten

Für die Beschreibung, die eh eine eigene Zeile darstellt, wäre das ja egal. Und ich könnte mir vorstellen, dass der IE overflow mit einem block-Element etwas besser handhabt, als bei inline-block.

bei der BEschreibung würde <div> gehen.
beim Album allerdings nicht da ja die Jahreszahl in der gleichen Zeile stehen soll.

Ein <span> macht eine Verschiebung um einige Pixel. Die 'Text-Zeilen-Höhe' nimmt ebenfalls um einige Pixel zu.

Das wird am inline-block liegen.

lässt sich das irgendwie hinbiegen, dass das nicht auftritt?

Gruß

[ChrisB]

Hi,

bei der BEschreibung würde <div> gehen.
beim Album allerdings nicht da ja die Jahreszahl in der gleichen Zeile stehen soll.

Na dann würde ich einfach die Jahreszahl absolut positionieren, und ihr einen Hintergrund geben.

Ein <span> macht eine Verschiebung um einige Pixel. Die 'Text-Zeilen-Höhe' nimmt ebenfalls um einige Pixel zu.

Das wird am inline-block liegen.
lässt sich das irgendwie hinbiegen, dass das nicht auftritt?

Natürlich, die Zeilenhöhe kannst du beeinflussen.

MfG ChrisB

[der_bob]

Na dann würde ich einfach die Jahreszahl absolut positionieren, und ihr einen Hintergrund geben.

dann könnte ich auch einfach eine neue Spalte machen, aber genau das möchte ich ja nicht.

Natürlich, die Zeilenhöhe kannst du beeinflussen.

mit  line-height:95%; habe ich zwar Name und Jahr auf der gleichen höhe, nur schneidet er jetzt bei einem "g" den unteren haken weg :(
kann ich das mit irgend einer ...
google sei dank! lösung: vertical-align:bottom;
Damit ist nicht nur die Verschiebung weg, sondern auch die Vergrößerung der Zeilenhöhe!!
Nur der IE muckt rum: es wird beim Überfahren des Links nur noch z.B. " (2000)" unterstrichen. :(

[ChrisB]

Hi,

Na dann würde ich einfach die Jahreszahl absolut positionieren, und ihr einen Hintergrund geben.
dann könnte ich auch einfach eine neue Spalte machen, aber genau das möchte ich ja nicht.

Äpfel und Birnen?
Was hat das mit einer neuen Spalten zu tun?

MfG ChrisB

[der_bob]

Na dann würde ich einfach die Jahreszahl absolut positionieren, und ihr einen Hintergrund geben.
dann könnte ich auch einfach eine neue Spalte machen, aber genau das möchte ich ja nicht.

Äpfel und Birnen?
Was hat das mit einer neuen Spalten zu tun?

ok dann habe ich dich falsch verstanden. Dachte mit absoluter Positionierung stünden alle Jahreszahlen untereinander?

[ChrisB]

Hi,

Dachte mit absoluter Positionierung stünden alle Jahreszahlen untereinander?

Wieso sollten sie?

MfG ChrisB

[ChrisB]

Hi,

Dachte mit absoluter Positionierung stünden alle Jahreszahlen untereinander?

Wieso sollten sie?

Ach so, kommt drauf an, wie man das mit dem overflow umsetzt.

MfG ChrisB

[der_bob]

Dachte mit absoluter Positionierung stünden alle Jahreszahlen untereinander?

Wieso sollten sie?

Nein, eben nicht.

Ach so, kommt drauf an, wie man das mit dem overflow umsetzt.

Hatte es vorher mal mit max-width für den Namen versucht. Das Jahr dann einfach hinterher. Wollte aber auch nicht.
Fällt dir was passendes ein?

Gruß

@Gunnar Bittersmann: hab deine Antwort eben erst gelesen ^^ komisches Funktionsprinzip des Forums hier!
Serverseitiges Abschneiden: hatte ich vorher, macht mich nicht wirklich glücklich. Begründest du ja selbst.
text-overflow: ellipsis scheint selbst im neusten FF nicht zu funktionieren. ebenso im IE8.

[Gunnar Bittersmann]

@@der_bob:

nuqneH

@Gunnar Bittersmann: hab deine Antwort eben erst gelesen ^^ komisches Funktionsprinzip des Forums hier!

Registrier dich, dann kannst du die Anzeige des Threadbaumes vernünftig einstellen.

text-overflow: ellipsis scheint selbst im neusten FF nicht zu funktionieren.

Ja. Aber mit XUL.

ebenso im IE8.

Wie kommst du darauf? Meine Beispielseite funktioniert.

Qapla'

[der_bob]

Registrier dich, dann kannst du die Anzeige des Threadbaumes vernünftig einstellen.

ist ne überlegung wert ^^

text-overflow: ellipsis scheint selbst im neusten FF nicht zu funktionieren.

Ja. Aber mit XUL.

Die Einschränkung, dass man den Text nicht mehr markieren kann, hindert mich daran das so zu lösen.

ebenso im IE8.

Wie kommst du darauf? Meine Beispielseite funktioniert.

dann hab ich wohl bei mir nen Fehler drin gehabt. Muss ich nochmal nachgucken.
...
Nein der IE will einfach nicht.

[der_bob]

Nein der IE will einfach nicht.

wenn ich zusätzlich noch ein display:inline-block; einschreibe funktionierts.
dann habe ich aber wieder das problem, dass das jahr da steht wo es stehen müsste wenn ich nicht abschneide statt direkt im anschluss :(

oder ich lasse es bei

 	display:inline-block;  
	font-size:11px;  
	max-width:195px;  
	overflow:hidden;  
	white-space:nowrap;

damit wird schonmal richtig geschnitten

damit die verschiebung weg ist noch ein
vertical-align:top;

nur der IE mal wieder der zeigt mit der verschiebungskorrektur keine vollständige unterstreichung vom link mehr an, nur das Jahr...

[Længlich]

Male magua!

Wie kommst du darauf? Meine Beispielseite funktioniert.

Bei mir nicht (Firefox 3.6). Nach »abgeschnittener Text:« ist erstmal gar nichts zu sehen. Wenn ich dann Javascript aktiviere (worauf ich ohne diesen Thread nicht gekommen wäre, weil die Seite laut NoScript kein JS enthält), erscheint »Clientseitiges Abschneiden .«
Markierbar ist es nicht, wie Du schon geschrieben hast.
Im Opera steht »Clientseitiges Abschneiden ro…«, und markieren und kopieren kann ich »Clientseitiges Abschneiden rock«.

Viele Grüße vom Længlich

[Gunnar Bittersmann]

@@Længlich:

nuqneH

weil die Seite laut NoScript kein JS enthält

Ah, NoScript ist im Spiel. Dann ist die Erweiterung wohl schuld. Wenn ich über die Web-Developer-Toolbar JavaScript deaktiviere, funktioniert es.

Offenbar deaktiviert die Web-Developer-Toolbar nur browserexternes JavaScript, NoScript aber auch browserinternes, womit Firefox aber XUL verarbeitet.

Vielleicht lässt sich NoScript so konfigurieren, dass es dies nicht tut? Die Einstellung dieser Erweiterung, wodurch Funktionen des Browsers lahmgelegt werden, halte ich für buggy.

Qapla'

[Gunnar Bittersmann]

@@der_bob:

nuqneH

Wenn der Name oder die Beschreibung zu lang ist soll der Rest abgeschnitten werden.

Nu mach mal ’n Punkt! Aber: Aller guten Dinge sind drei.

Qapla'

[Plain]

Aller guten Dinge sind drei.

Davon würde ich absolut abraten, denn im Firefox (3.6) wird ohne JavaScript gar nichts angezeigt.

[Gunnar Bittersmann]

@@Plain:

nuqneH

Aller guten Dinge sind drei.

Davon würde ich absolut abraten, denn im Firefox (3.6) wird ohne JavaScript gar nichts angezeigt.

Dann machst du etwas falsch. Bei mir funktioniert es bestens.

Was heißt „gar nichts“? Was heißt „ohne JavaScript“?

Qapla'

[Plain]

Was heißt „gar nichts“? Was heißt „ohne JavaScript“?

Hallo Gunnar,

ich habe die NoScript-Extension. Nur wenn die Seite erlaubt wird, erscheint unterhalb des Textes "abgeschnittener Text:" folgender Text:

Clientseitiges Abschneiden .

Vermutlich ist hier noch falsch, dass nur ein Punkt erscheint.

Verbiete ich die Seite über die NoScript-Extension steht dort nur "abgeschnittener Text:" und darunter ist es leer (weiß). Es wird in dem Kasten allerdings Platz für die eine Zeile reserviert.

Ich habe übrigens keinerlei User-CSS im Einsatz.

Gruß,
Plain

[Gunnar Bittersmann]

@@Plain:

nuqneH

ich habe die NoScript-Extension.

Ah, die ist also schuld.

Qapla'

[Plain]

Ah, die [NoScript-Extension] ist also schuld.

Hallo Gunnar,

interessant zu wissen, wie sich die beiden Extensions verhalten. Danke für die Info.

Darum revidiere ich meine Aussage und würde nun davon abraten, weil es mit NoScript-Extension nicht funktioniert und weil ohne NoScript auch im Firefox 3.6 noch keine Ellipse angezeigt wird.

Gruß,
Plain

[Gunnar Bittersmann]

@@Plain:

nuqneH

Darum revidiere ich meine Aussage und würde nun davon abraten, weil es mit NoScript-Extension nicht funktioniert

Ich werde das mal besser in meinem Artikel mit erwähnen.

und weil ohne NoScript auch im Firefox 3.6 noch keine Ellipse angezeigt wird.

?? Wird doch.

Qapla'

[Plain]

und weil ohne NoScript auch im Firefox 3.6 noch keine Ellipse angezeigt wird.

?? Wird doch.

Komisch, bei mir steht da auch mit deaktiviertem NoScript nur "Clientseitiges Abschneiden .".

Bei Længlich scheint es auch so zu sein (auch Firefox 3.6).

[Længlich]

'A!

Komisch, bei mir steht da auch mit deaktiviertem NoScript nur "Clientseitiges Abschneiden .".

Bei Længlich scheint es auch so zu sein (auch Firefox 3.6).

Ja, aber auch mit NoScript. Ich hatte es nicht deaktiviert, sondern nur der Seite Scripting erlaubt. Bin mir nicht sicher, aber ich glaube, so ganz ohne Einschränkungen läuft sie dann immer noch nicht.

Daß es bei der Herangehensweise Probleme mit NoScript gibt, ist ein ernstzunehmendes Problem. NoScript ist eins der verbreitetsten Firefox-Addons, und das Blocken von XUL scheint default zu sein – jedenfalls habe ich es nicht bewußt so eingestellt.

Viele Grüße vom Længlich