diff --git a/frontend/src/pages/Broadcast/Component/AllBroadcasts/Card/Card.jsx b/frontend/src/pages/Broadcast/Component/AllBroadcasts/Card/Card.jsx index d7fc290a..46503411 100644 --- a/frontend/src/pages/Broadcast/Component/AllBroadcasts/Card/Card.jsx +++ b/frontend/src/pages/Broadcast/Component/AllBroadcasts/Card/Card.jsx @@ -2,6 +2,7 @@ import React, { useState } from "react"; import ReactCardFlip from "react-card-flip"; import { Modals } from "../../Carousel/Modal/index.js"; import style from "./card.module.scss"; +import DOMPurify from "dompurify"; export function Card(props) { let dark = props.theme; @@ -39,6 +40,12 @@ export function Card(props) { "December", ]; + const sanitizedContent = DOMPurify.sanitize(props.project.content); + const truncatedContent = + sanitizedContent.length > 250 + ? sanitizedContent.substring(0, 250) + "..." + : sanitizedContent; + return (
@@ -53,7 +60,10 @@ export function Card(props) { >
{props.project.title}
-
+
{months[date.getMonth()]},{date.getFullYear()}
diff --git a/frontend/src/pages/Broadcast/Component/AllBroadcasts/Card/card.module.scss b/frontend/src/pages/Broadcast/Component/AllBroadcasts/Card/card.module.scss index 09dcef3d..aeabc718 100644 --- a/frontend/src/pages/Broadcast/Component/AllBroadcasts/Card/card.module.scss +++ b/frontend/src/pages/Broadcast/Component/AllBroadcasts/Card/card.module.scss @@ -56,6 +56,9 @@ text-align: center; font-size: 1.2rem; width: 100%; + word-wrap: break-word; + overflow-wrap: break-word; + display: inline-block; } .card-item-light:hover {