时间戳

首页 > 解决方案 > 字符在 div 中显示的限制

reactjs - 字符在 div 中显示的限制

问题描述

我现在有个问题。我有一个用户可以看到的文本（项目描述），我希望它只显示前 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>
        </>
    );
};

标签： reactjsbootstrap-4character

解决方案

这很简单。

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

  1. flag : 指示是否显示完整描述
  2. text : 要显示的描述文本
  3. 消息：指示显示更多/显示更少的文本

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

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

这是我显示描述​​的功能。它根据 max-char-limit 显示完整或部分描述。 在此处输入图像描述

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

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

我希望这会有所帮助。

推荐阅读