I am generating text from a JSON file and displaying it within a div, when the user types a word in an input it scrolls to the current word and if the current word is on the next line then 3 lines appear in the div, how can I set only display 2 lines at once in the div
<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" : "green";
} else if (isCurrentWord) {
const typedChar = typedChars[charIndex] || "";
charColor = typedChar === char ? "green" : typedChar !== "" ? "red" : "#fff";
}
return (<>
<span key={charIndex} style={{ color: charColor, backgroundColor: (isCurrentWord && charIndex === typedChars.length) ? 'grey' : 'transparent', paddingBottom: (isCurrentWord && charIndex === typedChars.length) ? '5px' : '0px', paddingTop: (isCurrentWord && charIndex === typedChars.length) ? '5px' : '0px' }}>{char}</span>
</>
);
})}
{' '}
</span>
);
})}
</p>
</div>
.box {
font-size: 1.5rem;
height: calc(2 * 2.4em); /* Allow only two lines of text */
overflow-y: hidden; /* Prevent vertical scrolling within the div */
padding: 1.5rem; /* Adjust padding to vertically center */
line-height: 1.8em; /* Ensure consistent line height */
display: block;
white-space: normal;
background-color: var(--sub-alt-color);
border-radius: 10px;
color: var(--text-color)
}
.box .word {
position: relative;
margin: 0 5px 2px;
}
Should I modify it in such a way that the first line is at the center of the screen, so that the next line also scrolls to that position in this way only 2 lines appear?
