大家好，我正在使用PHP和MYSQL進行增強，我成功地從資料庫中渲染了資訊，但是我在描述中遇到了問題，基本上，我在描述中輸入的任何內容都會顯示出來。我一直試圖弄清楚，但被卡住了。我正在嘗試做的是限制描述，例如
我不想在描述中顯示所有單詞/字符，而是將其限制為 30 個字符或更少的單詞。并修復影像以便 UI 不會被破壞，我嘗試使用 max-length 但它不起作用。我正在使用 CSS 進行樣式設定
例子：
一位不知名的印刷商拿了一個打字機，將它打亂，做成了一本打字樣本。它不僅經歷了五個世紀，而且經歷了電子排版的飛躍，基本保持不變。它在 1960 年代隨著包含 Lorem Ipsum 段落的 Letraset 表的發布而流行起來，最近還隨著 Aldus PageMaker 等桌面出版軟體（包括 Lorem Ipsum 的版本）而普及。
我希望它像這樣縮短
一位不知名的印刷商拿了一個打字機，將它打亂，做成了一本打字樣本。它活了下來......
索引.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>
樣式.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;
}
}
}
}
}
}
uj5u.com熱心網友回復：
這樣做的 PHP 方法很簡單：
在“$row['desc'];”的位置使用此代碼 它會為你作業......你也可以根據你的需要通過更改 substr 值“0,50”來設定值
strlen($row['desc']) > 50 ? substr($row['desc'],0,50)."..." : $row['desc'];
uj5u.com熱心網友回復：
我認為這個 css 會起作用；
.description {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/467709.html
上一篇：將兩個框架以相對寬度放在一起