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>
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>
Any workaround for achieving this??
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>
);
};
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)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.