字符在 div 中显示的限制答案

【问题标题】：Limitation for Charachters to show in div's字符在 div 中显示的限制
【发布时间】：2021-04-13 09:47:34
【问题描述】：

我现在有一个问题。我有一个用户可以看到的文本（项目描述），我希望它只显示前 60 个字符。我尝试了stackoverflow的不同解决方案，但没有任何帮助。谢谢。

import React, { useState } from "react";
import Card from "react-bootstrap/Card";
import "./productItem.css";



const ItemDescribtion = () =>
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad";

const ProductItem = (props) => {
    return (
        <>
            <Card className="product--item">
                <Card.Text>
                    <ItemDescribtion />
                </Card.Text>
            </Card>
        </>
    );
};

【问题讨论】：

没有您的 code showing the problem, it's difficult to know what your limitations are, but have you tried text-overflow: ellipsis; 的功能版本？
@RichDeBrouke 我现在在这个组件中没有任何功能，这就是我问它应该是什么样子的原因。试过ellipsis 但没用:(

标签： reactjs bootstrap-4 character

【解决方案1】：

这很简单。

声明处理描述的状态，该状态将具有以下字段。

标志：指示是否显示完整说明
文本：要显示的描述文本
消息：指示显示更多/显示更少的文字

const[descriptionText,setDescriptionText] = useState({flag:false, text:'', message:''});

像这样声明一个最大字符限制。 const DESCRIPTION_CHAR_LIMIT = 60;

这是我显示描述的功能。它根据 max-char-limit 显示完整或部分描述。

这是我切换显示更多/显示更少的功能 const toggleDescription = () => setDescription(fullDescription);

这是我的描述框代码。不要担心标签名称。它们只是我的样式组件。

我希望这会有所帮助。

【讨论】：

我很高兴它有帮助。干杯！

【解决方案2】：

如果您只是想限制卡片中的文字，并且您的用户可以通过单击卡片或其他内容来查看全文，那么您可以使用 text-overflow: ellipsis;。如果您需要在卡片中显示完整的答案，那么您可以按照@knigalye 的建议使用 JavaScript。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

<style>
    .card-text {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
</style>

<div class="row">
    <div class="col-sm-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Special title treatment</h5>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Special title treatment</h5>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Special title treatment</h5>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
    </div>
</div>

【讨论】：