I am generating multiple words from a JSON file and want to display only two lines at once, currently I am using line clamps but it truncates the last word of the second line. If the word is being truncated I want it to move to the next line. Is it possible to implement this?
<div className="box">
<p className="word">
{wordList.map((word, wordIndex) => {
const currWord = typedHistory[wordIndex] || "";
const isCurrentWord = wordIndex === typedHistory.length;
const hasWrongChars = currWord.split("").some((char, index) => char !== word[index]);
const isExcessLength = currWord.length > word.length;
const isIncomplete = currWord.length >= 0 && currWord.length < word.length && typedHistory.includes(currWord);
const shouldHighlightWordRed = hasWrongChars || isExcessLength || isIncomplete;
return (
<span key={wordIndex} ref={isCurrentWord ? currentWordRef : null}>
{word.split("").map((char, charIndex) => {
let charColor = "#fff";
if (wordIndex < typedHistory.length) {
charColor = shouldHighlightWordRed ? "red" : "var(--main-color)";
} else if (isCurrentWord) {
const typedChar = typedChars[charIndex] || "";
charColor = typedChar === char ? "var(--main-color)" : typedChar !== "" ? "red" : "#fff";
}
return (
<span key={charIndex} style={{ color: charColor }}>{char}</span>
);
})}
{' '}
</span>
);
})}
</p>
</div>
CSS:
.box {
padding-left: 1.5rem;
padding-right: 1.5rem;
background-color: var(--sub-alt-color);
border-radius: 10px;
max-height: 8.5em;
height: 8.5em;
user-select: none;
}
.box .word {
display: block;
font-size: 1.5rem;
overflow-y: hidden;
line-height: 1.8em;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
How I am generating text
useEffect(() => {
import("../../public/english.json").then((words) =>
dispatch(setWordList(words.default))
);
}, [dispatch]);
I am expecting the behavior of text like in this case: typetest.io