如何限制 UI 中显示的描述？

Question

大家好，我正在使用 PHP 和 MYSQL 进行增强，我成功地呈现了数据库中的信息，但是我在描述中遇到了问题，基本上，无论我输入什么在说明中显示。我一直在努力弄清楚，但一直坚持下去。我想做的是限制描述，例如

我不想在描述中显示所有 words/characters，而是想将其限制为 30 个字符或更少的单词。并修复图像，使 UI 不会被破坏，我尝试使用 max-length 但它没有用。我正在使用 CSS 进行造型

示例：

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.

我要这样缩短

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;
                            
        
                    }
                }
            }
        }

    }
}

Answer 1

PHP 方法很简单：

在“$row['desc'];”的位置使用此代码它会为你工作... 您也可以根据需要通过更改 substr 值“0,50”

来设置值

strlen($row['desc']) > 50 ? substr($row['desc'],0,50)."..." : $row['desc'];

Answer 2

我认为这个 css 可行；

.description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

如何限制 UI 中显示的描述？

How can I limit description being shown in UI?

php

mysql

user-interface

sass