i am Limiting the description length in React using a function

    const truncateString = (str, num) => {
    if (str?.length > num) {
        return str.slice(0, num)   ' ...read more'
    }
    else {
        return str;
    }
   }

here i want to edit '...read more' font and want to make it bold and then return with normal sliced string how to do that?

CodePudding user response：

You can return a fragment with the text and a <strong> (or other element you style to make it bold, but remember accessibility if you do). When doing that, it may be best to always return a fragment even if you don't need one:

const truncateString = (str, num) => {
    if (str?.length > num) {
        return <>{str.slice(0, num)} <strong>...read more</strong></>;
    } else {
        return <>{str}</>;
    }
};

...but you don't technically have to:

const truncateString = (str, num) => {
    if (str?.length > num) {
        return <>{str.slice(0, num)} <strong>...read more</strong></>;
    } else {
        return str;
    }
};

Example:

const truncateString = (str, num) => {
    // Had to remove the optional chaining because the Babel used by
    // Stack Snippets is **THAT** old.
    if (str && str.length > num) {
        // Have to use React.Fragment because the Babel used by
        // Stack Snippets is **THAT** old.
        return (
            <React.Fragment>
                {str.slice(0, num)} <strong>...read more</strong>
            </React.Fragment>
        );
    } else {
        return <React.Fragment>{str}</React.Fragment>;
    }
};

const Example = () => {
    return (
        <div>
            <div>Truncated: {truncateString("abcdefghijklmnopqrstuvwxyz", 10)}</div>
            <div>Untruncated: {truncateString("abcde", 10)}</div>
        </div>
    );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Example />);

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

A couple of other thoughts:

1. You also might make it a component.
2. You might make the "read more" clickable so it shows the remainder of the text (which strengthens the argument for making it a component).

Rough sketch:

const { useState } = React;

const LimitedTextWithReadMore = ({ text = "", limit }) => {
    const [showMore, setShowMore] = useState(false);
    if (text.length > limit) {
        return (
            <React.Fragment>
                {showMore ? text : text.slice(0, limit)}{" "}
                <button className="show-more" type="button" onClick={() => setShowMore((flag) => !flag)}>
                    {showMore ? "...read less" : "...read more"}
                </button>
            </React.Fragment>
        );
    } else {
        return <React.Fragment>{text}</React.Fragment>;
    }
};

const Example = () => {
    return (
        <div>
            <div>
                Limited: <LimitedTextWithReadMore text="abcdefghijklmnopqrstuvwxyz" limit={10} />
            </div>
            <div>
                Unlimited: <LimitedTextWithReadMore text="abcde" limit={10} />
            </div>
        </div>
    );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Example />);

button.show-more {
    border: none;
    font-family: inherit;
    font-weight: inherit;
    background-color: transparent;
    outline: none;
    text-decoration: underline;
    cursor: pointer;
}

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

CodePudding user response：

what u can use here is

    const truncateString = (str, num) => {
    if (str.length > num) {
        return str.substring(0, num)   ' ...read more'
    }
    else {
        return str;
    }
   }

Hope it works