mehrere Elemente einer Box ausblenden

[alterschwede]

Hallo Community

Ich habe ein Layout mit mehreren Contentkacheln (content-box, overflow: hidden) und fester Höhe.
In einer Kachel werden aktuelle News eingespeißt.



<div id="home-news">
<span>
<p><a href="linkadresse">text text text text text text text text text text text</a><br>
<time>23.02.2018</time>
</p>
</span>
<span>
<p><a href="linkadresse">text text text text text text text text text text text</a><br>
<time>23.02.2018</time>
</p>
</span>
<span>
<p><a href="linkadresse">text text text text text text text text text text text</a><br>
<time>23.02.2018</time>
</p>
</span>
</div>

Aktuell wird vom untersten span die Zeile abgeschnitten (overflow: hidden), die nicht in die Box passt.
Problem ist, dass dadurch z.T. nur die erste Textzeile da ist, aber die 2. und das Datum fehlen.



Wie kann ich erreichen, dass das gesamte span Element entweder ganz oder gar nicht angezeigt wird. Mir fehlt hier echt eine Idee ...

Würde mich über Tipps freuen!!!

 

[alterschwede]

Das kann eigentlich nur passieren, wenn Du der Box eine feste Höhe gegeben hast. Setzt Du die Höhe auf "auto" sollte nichts abgeschnitten werden.

Danke erstmal für deine Antwort. Das ist auch so. Die Kacheloptik mit fixer Höhe ist vorgegeben, daran kann ich nichts ändern.

 

[alterschwede]

Dann könnte es eine Möglichkeit sein, die Box scrollbar zu machen mit overflow:auto.

Ja, dass hab ich auch schon gemacht, aber das sieht ... aus. :(

Besser wäre ich könnte, dass nicht vollständig darstellbare Element umbrechen in eine neue nicht darstellbare Spalte oder so, damit es unsichtbar wird ...

 

[alterschwede]

Ich glaube, jetzt verstehe ich: Passt das letzte Element nicht hinein, möchtest Du es vollständig unsichtbar machen, damit nicht abgeschnitten ist?

Ja genau. Nur wie???

 

[alterschwede]

Dank du bist mein Held. Ich habe es schon in meine Umgebung eingebunden.

Javascript hab ich leider gar nicht drauf. Das ist genial. :) DANKE!!!

 

[basti1012]

Man hätte auch die Box scrollbar machen können ohne Scrollbalken. Aber so gehts natürlich auch.
Nachteil währe auch ,die Besucher würden nicht wissen ob es scrollbar ist ohne Scrollbalken

 

[alterschwede]

Ja schon, aber so, wie es mir sempervivum gezeigt hat, ist es perfekt. :)

 

[basti1012]

Ich frage mich gerade wie das geht? Woher weiss die css das der container voll ist? Ich dachte das geht mit css nicht ,das man den inhalt eines containers erfassen kann ,bzw das er voll ist . Aber es geht so ,cool.

 

[basti1012]

aber das geht auch nur weil es mehrer spans sind oder ? wenn es nur ein span währe mit 1000 zeichen drinne ,würde der container ohne JS doch voll laufen richtig?

 

[alterschwede]

Super, dass das mit CSS auch klappt. Habs mir gleich mal abgespeichert. :)

Inwiefern ist das der Javascript-Lösung vorzuziehen? Sollte ich das kleine Script zwingend austauschen gegen die CSS-Lösung?

 

[basti1012]

Das muß jeder selber wissen.Nur der Vorteil ist ,wenn man Css benutzt,das Besucher die kein Javascript aktiviert haben ,das auch nutzen können.Wenn Besucher kein Javascript aktiviert haben und auf einer Hp kommen die nur mit Javascript funktioniert,die haben ja nix davon.Meine meinung ist dazu,alles was ohne Javascript auch funktioniert sollte man auch nutzen.
Aber im endeffekt muß es jeder selber wissen.
Außer diesen Nachteil schadet Javascript wohl auch nicht.Javascript läst sich noch Manipuleren, was in diesen Fall egal wäre,da hat derBesucher auch nix von wenn er da dran rumfummeln würde, außer abgeschnittene Texte.