Helo guys, I’m using PHP and MYSQL for my enhancement, I successfully render the information from the database, but I encounter a problem in the description, basically, whatever I input in the description is being shown. I’ve been trying to figure it out but got stuck on it. What I’m trying to do is limit the description for example
Instead of showing all words/characters in the description, I want to limit it by 30 characters or fewer words. and make the image fixed so that the UI will not be broken, I tried using max-length but it didn’t work. I’m using CSS for styling
example:
n unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
I want it to be shorten like this
n unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived…..
index.php
<?php
require('./backend/connection.php');
$con = connection();
$sql = $con->query("SELECT * FROM products") or die($con->error);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-Commerce</title>
<link rel="stylesheet" href="./style/style.css">
</head>
<body>
<section>
<?php while ($row = $sql->fetch_assoc()) { ?>
<div class="card">
<img src="<?php echo './uploads/' . $row['image']; ?>" alt="">
<div class="card-body">
<h3 class="card-title"><?php echo $row['name']; ?></h3>
<p class="description"> <?php echo $row['desc']; ?></p>
<div class="lower-body">
<span class="price"> $ <strong> <?php echo $row['price']; ?> </strong> </span>
<button>Show More</button>
</div>
</div>
</div>
<?php } ?>
</section>
</body>
</html>
style.css
section{
padding: 80px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 20px;
.card{
display: flex;
flex-direction: column;
width: 18rem;
height: 450px;
border-radius: 5px;
-webkit-box-shadow: 6px 9px 25px 0px rgba(222,222,222,1);
-moz-box-shadow: 6px 9px 25px 0px rgba(222,222,222,1);
box-shadow: 6px 9px 25px 0px rgba(222,222,222,1);
img{
height: 100%;
width: 100%;
object-fit: contain;
overflow: hidden;
}
.card-body{
padding: 2px 10px;
.card-title{
padding: 5px;
}
.description{
font-size: 15px;
margin-bottom: 10px;
color: gray;
text-overflow: ellipsis;
overflow: hidden;
}
.lower-body
{
display: flex;
align-items: center;
justify-content: space-around;
padding-bottom: 20px;
button{
padding: 2px 5px;
background-color: #e7f3ff;
border-radius: 5px;
font-weight: 600;
outline: none;
border: none;
cursor: pointer;
&:hover{
background-color: #cbe4ff;
color: #000;
}
}
}
}
}
}
2
Answers
The PHP way of doing this is simple:
use this code on the place of "$row[‘desc’];" it will work for you…
and also you can set value in this according to your need by changing substr value "0,50"
I think this css will work;