字符显示在div的限制 [英] Limitation for Charachters to show in div's

问题描述

我现在有一个问题.我有一个用户可以看到的文字(商品说明)，我希望它只显示前60个字符.我尝试了与stackoverflow不同的解决方案，但没有任何帮助.谢谢.

I have an issue right now. I have a text that user can see(Description for Item), and I want it to show only first 60 characters. I have tried different solutions from stackoverflow, but nothing helped me. Thank you.

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

推荐答案

这很简单.

声明用于处理说明的状态，该状态将包含以下字段.

Declare a state for handling description which will have following fields.

1. 标志:指示是否显示完整的说明
2. 文本:要显示的描述文本
3. 消息:指示 显示更多 / 显示较少
的文本>

1. flag: to indicate if full description is shown or not
2. text: description text to show
3. message: text indicating show more/show less

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

像这样声明最大字符数限制. const description_CHAR_LIMIT = 60;

Declare a maximum-char-limit like this. const DESCRIPTION_CHAR_LIMIT = 60;

这是我显示描述​​的功能.它根据max-char-limit显示全部或部分说明.

Here is my function to display description. It displays full or some part of description according to max-char-limit.

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

Here is my function to toggle Show more/Show less const toggleDescription = () => setDescription(fullDescription);

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

Here is my code for description box. Don't worry about the tag names. They are just my styled components.

我希望这会有所帮助.

这篇关于字符显示在div的限制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！