Ich würde empfehlen, jQuery zu verwenden, um das Breitenattribut der CSS-Klasse zu betrachten.
Im Hinblick auf den divs anspricht:
In Ihrem CSS, die Breite der Box, wenn sie auf einem kleineren Bildschirm (max-width: 980px) beträgt 100%, die Breite der Box, wenn die Bildschirm> 1300px breit ist 32,8%. So können Sie ein Skript schreiben, das die width-Eigenschaft betrachtet und entsprechend handelt, dh wenn die Breite 32,8% beträgt, dann überprüfen Sie die Höhe und wenden Sie die Logik an, wenn die Höhe größer als gewünscht ist().
Im Hinblick auf die Höhe der Suche nach:
die Höhe Anwendung ist wie andere gesagt haben, ein Fall von auf der Höhe Eigenschaft des div suchen. Wenn es größer als Ihre gewünschte maximale Höhe ist, wenden Sie die gewünschte CSS an.
Im Hinblick auf die mehr lesen:
einen Blick auf dieses Beispiel:
Was es im Wesentlichen tut, ist, was Sie in PHP zu tun versuchten, sieht es bei der Zeichenzählung und sagt, wenn der gelesene Text noch nicht angeklickt wurde, dann teile den Text nach dem letzten maximalen Zeichen und lege dann den Rest des Textes in einen versteckten Bereich.
Wenn read more gedrückt wird, wird der gesamte Text innerhalb des versteckten Bereichs neben dem bereits angezeigten Text angezeigt.
http://codepen.io/maxds/pen/jgeoA/
hier ist der Code aus diesem codepen:
<html>
<head>
<title>jQuery Read More/Less Toggle Example</title>
<style>
.morecontent span {
display: none;
}
.morelink {
display: block;
}
</style>
</head>
<body>
<span class="more">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
<br><br>
<div class="more">
Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.
</div>
<script type="text/javascript">
$(document).ready(function() {
// Configure/customize these variables.
var showChar = 100; // How many characters are shown by default
var ellipsestext = "...";
var moretext = "Show more >";
var lesstext = "Show less";
$('.more').each(function() {
var content = $(this).html();
if(content.length > showChar) {
var c = content.substr(0, showChar);
var h = content.substr(showChar, content.length - showChar);
var html = c + '<span class="moreellipses">' + ellipsestext+ ' </span><span class="morecontent"><span>' + h + '</span> <a href="" class="morelink">' + moretext + '</a></span>';
$(this).html(html);
}
});
$(".morelink").click(function(){
if($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
</script>
</body>
</html>
Vielen Dank für Ihre Antwort. Könnten Sie mir einen Einblick geben, warum Sie in diesem Fall die Verwendung eines Tisches nicht empfehlen? Ich stimme dir zu (Dies wurde vor einem Jahr erstellt, als ich ein sehr neuer Entwickler war), aber ich würde gerne wissen, ob es irgendwelche besonderen Nachteile gibt. –
Welchen Gewinn erzielen Sie, wenn Sie für jede Zelle eine neue Tabelle verwenden, wenn Sie entweder eine einzige Tabelle mit allen drei Zellen verwenden können (was Ihre äußere Hülle sein könnte) oder gar keine Tabelle verwenden. Sie sollten nur Tabellen verwenden, um die Tabellendaten tatsächlich anzuzeigen. Alles andere ist nur schlechte Übung. Ich würde stattdessen ein Grid-System verwenden (wie Bootstrap), und verwenden Sie es vordefinierte leicht ansprechende Funktionen. – Seika85