lucien/tanuki-s-forum
1
0
Fork 0
generated from lucien/api-template
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: fixed message text wraping

Browse source
This commit is contained in:
Lukian 2025-04-09 15:50:36 +02:00
parent 4045681913
commit 2795d4686e
2 changed files with 24 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

24
front/src/components/MessageComponent.tsx
View file

@ -12,18 +12,20 @@ export default function MessageComponent({ message, user, channel, deleteMessage
return (
<div key={message.id} className="message">
<Link to={`/u/${message.username}`}>{message.username}</Link>:{" "}
{message.content.split(" ").map((word, index) => {
if (word.startsWith("@")) {
const mention = message.mentions.find((mention) => `@${mention.username}` === word);
if (mention) {
return <span><Link key={index} to={`/u/${mention.username}`}>{word}</Link> </span>;
<div className="message-content">
<Link to={`/u/${message.username}`}>{message.username}</Link>:{" "}
{message.content.split(" ").map((word, index) => {
if (word.startsWith("@")) {
const mention = message.mentions.find((mention) => `@${mention.username}` === word);
if (mention) {
return <span><Link key={index} to={`/u/${mention.username}`}>{word}</Link> </span>;
}
} else if (word.startsWith("https://") || word.startsWith("http://")) {
return <span><Link to={word}>{word}</Link> </span>
}
} else if (word.startsWith("https://") || word.startsWith("http://")) {
return <span><Link to={word}>{word}</Link> </span>
}
return <span key={index}>{word} </span>;
})}
return <span key={index}>{word} </span>;
})}
</div>
<p>{new Date(message.date * 1000).toLocaleString()}</p>
<div>
{message.content.toLocaleLowerCase().includes("gros cochon") && (

11
front/src/styles/MessageComponent.css
View file

@ -3,3 +3,14 @@
border: 1px solid #270722;
padding: 10px;
}
.message-content {
word-break: break-word;
overflow-wrap: break-word;
display: -webkit-box;
line-clamp: 10;
-webkit-line-clamp: 10;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}