Προς το περιεχόμενο

Show/Hide text in Table

Gunix

Από τον Gunix
στο Web Design - Development

 Share

Προτεινόμενες αναρτήσεις

Gunix Grand Master

Gunix

Δημοσ.
Δημοσ. (επεξεργασμένο)

Γεια σας.

Θέλω την βοήθεια σας παρακαλώ. Έχω φτιάξει ένα πίνακα με δυο στήλες που έχουν βίντεο και κείμενο. Θέλω να του προσθέσω ένα κείμενο αρκετά μεγάλο δηλαδή μια ολόκληρη σελίδα Α4 πχ 31 γράμμες. Επειδή δεν θέλω να φαίνεται  όλο κείμενο σκέφτηκα με το που ισέρχεται στο περιεχόμενο να έχει μέσα στο πίνακα ένα κέιμενο με 10 γραμμές και στο τέλος δίπλα στην λέξη της 10ης γραμμης έχει το read more για να μπορεί να διαβάσει την συνέχεια του κειμένο και μετά να το κάνει hide από την 11η γραμμη έως 31η γραμμή.

Αυτό πως μπορώ να το κάνω μέσα για το table? 

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">

	<title>test</title>

	<!-- Load CSS Styles -->
	<link type="text/css" rel="stylesheet" href="css/styles.css" />
</head>

<body>
	<h2><font color="white">back</font></h2>
	<a href="index.html"><img src="eikones/back.png" width="50" height="25" alt="Back" title="Back" /></a>

	<table width="800" border="1" align="center" bordercolor="#ffe6b3">
		<tr>
			<th scope="row">
				<iframe>Video</iframe>
				<p><h3>Video 1</h3></p>
				<p><h4>Keimeno 1 Keimeno 1 Keimeno 1 Keimeno 1 Keimeno 1 Keimeno 1</h4></p>
			</th>
			<th scope="row">
				<video width="500" height="281" controls>
					<source src="" type="video/mp4">
					Your browser does not support the video tag.
				</video>
				<p><h3>Video 2</h3></p>
				<p><h4>keimeno 2 keimeno 2 keimeno 2 keimeno 2 keimeno 2 keimeno 2</h4></p>
				</th>
			</th>
		</tr>
	</table>
</body>
</html>

 

Επεξ/σία από Gunix
The King Proficient

The King

Δημοσ.
Δημοσ. (επεξεργασμένο)

http://jedfoster.com/Readmore.js/

Εύκολο API, πάτα στο "Usage, examples and options" να δεις παραδείγματα.

Συγκεκριμένα για να "σπας" το κείμενο με Read More αναλόγως τις γραμμές που θες, πας στο MEDIA QUERIES AND OTHER CSS TRICKS 

body {
  font: 16px/1.5 sans-serif;
}

/* Show only 4 lines in smaller screens */
article {
  max-height: 6em; /* (4 * 1.5 = 6) */
}

 

Εννοείται για σένα το article είναι τα <p> σου στα οποία θα  δώσεις μια κλάση πχ <p class="text-more"> και μετά θα αλλάξεις στο CSS το article σε 


/* Show only 4 lines in smaller screens */
.text-more {
  max-height: 6em; /* (4 * 1.5 = 6) */
}

 

Επεξ/σία από The King
The King Proficient

The King

Δημοσ.
Δημοσ. (επεξεργασμένο)
6 λεπτά πριν, Gunix είπε

Με αυτό τον τρόπο θα μεγαλο το μακρος της πρώτης στηλεις του πινακα πχ και θα μικρένη?

Ναι αν δεν υπάρχει κάτι που να το εμποδίζει από το υπάρχον css σου.

Σημείωση 

Χρησιμοποίησε είτε <h4> είτε <p>, δε χρειάζεται και τα δυο μαζί, αν θες τα paragraph σου διαφορετικά τότε όρισε το μέσα από την <p> κλάση που είπαμε θα φτιάξεις (πχ font-size, font-weight, font-family, κτλπ)

Επεξ/σία από The King

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Πρέπει να είστε μέλος για να αφήσετε σχόλιο

Δημιουργία λογαριασμού

Εγγραφείτε με νέο λογαριασμό στην κοινότητα μας. Είναι πανεύκολο!

Δημιουργία νέου λογαριασμού

Σύνδεση

Έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.

Συνδεθείτε τώρα
 Share
Προς την λίστα θεμάτων
  • Δημιουργία νέου...