How to set attribute "dangerouslySetInnerHTML" with ellipsis using antd?

Question

I need to show comment with ellipsis. I have used antd's Paragraph Typography for it. My problem is that comment can also contain html attributes (link to tagged users) so I also need to set dangerouslySetInnerHTML in the component. How to set this in Typography component?

<Paragraph ellipsis={{ rows: 2, expandable: true, symbol: "more" }}>
      {comment}
</Paragraph>

Preview:

I tried using span inside Paragraph to use dangerouslySetInnerHTML, but then ellipsis started showing just "...more" for all long comments, without showing any initial characters in the comment to fill the width. Also getting a warning on using any HTML element inside <Paragraph></Paragragh> other than string

<Paragraph ellipsis={{ rows: 2, expandable: true, symbol: "more" }}>
      <span dangerouslySetInnerHTML={{ __html: comment.comment }} />
</Paragraph>

Preview:

Warning:

Any workaround for achieving this??

you can check a pretty good review on this link: https://medium.com/better-programming/what-is-dangerouslysetinnerhtml-6d6a98cbc187 use incognito mode — crizcl, Feb 24 '21 at 13:54
Actually I'm also getting this warning on using any HTML element inside other than string - Warning: [antd: Typography] `ellipsis` should use string as children only. — Nikita Jain, Feb 24 '21 at 17:52
what is the ellipsis library you are using? can you share the link? what version of antd? — crizcl, Feb 24 '21 at 18:31

score 2 · Accepted Answer · answered Mar 10 '21 at 17:08

First off I would love this functionality for antd Typography as well but that is not the case at the moment so here is a bit of a work around for you in the meantime.

import React, { useState } from "react";
import Button from "antd/es/button";

import ChopLines from "chop-lines";
import insane from "insane";

const Sanitized = ({ html }) => (
    <div
        className={styles.sanitizedBody}
        dangerouslySetInnerHTML={{
            __html: insane(html, {
                allowedTags: [
                    "p",
                    "strong",
                    "em",
                    "a",
                    "b",
                    "i",
                    "span",
                    "div",
                    "br",
                    "u",
                    "img",
                ],
            }),
        }}
    />
);

const Ellipsis = ({ expand }) => (
    <Button
        size="small"
        shape="round"
        type="primary"
        onClick={expand}
    >
        ...see more
    </Button>
);

const Post = ({content}) => {
    const [expanded, setExpanded] = useState(false);

    render (
        <div>
            {expanded ? (
                <Sanitized html={content} />
            ) : (
                <ChopLines
                    maxHeight={90}
                    ellipsis={
                        <Ellipsis expand={expand}>
                            <span>Read More</span>
                        </Ellipsis>
                    }
                >
                    <Sanitized html={content} />
                </ChopLines>
            )}
        </div>
    );
};

score 0 · Answer 2 · answered Oct 01 '22 at 19:20

I think we can't do it in antd now. How about react-truncate-html

Ex:

import Truncate from 'react-truncate-html';
 
<Truncate
  lines={3}
  dangerouslySetInnerHTML={{
   __html: "Hi, <strong>here’s some</strong> <i>HTML</i>"
  }}
/>

I have no idea how to make custom ellipsis text, button, ... (ex: read more)

How to set attribute "dangerouslySetInnerHTML" with ellipsis using antd?

2 Answers2