So I'm trying to make a type speed test. It displays random words and makes you type it. It works, it can display text and when I type it shows if I typed it correctly. I accomplished this by making each character a separate element:

<section >
        <char>a</char>
        <char>b</char>
        <char>c</char>
</section>

The whole css file:

:root {
    --bg-color: #0A122A;
    --font-untyped: #7E7F9A;
    --font-correct: #29E7CD;
    --font-wrong: #E65F5C;
    --font-size: 24px;
}

html body {
    color: var(--font-untyped);
    background-color: var(--bg-color);
    font-size: var(--font-size);
    font-family: 'Source Sans Pro', sans-serif;
    width: 100%;
    height: 100%;
}

.wrong {
    color: var(--font-wrong);
}

.correct {
    color: var(--font-correct);
}

.current {
    text-decoration: underline;
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    word-wrap: break-word;
    height: auto;
    word-wrap: break-
}

When there are too much characters, it overflows. It just gets cut from my screen. I tried:

overflow-wrap: break-word;
word-wrap: break-word;
overflow-x: hidden;
height: auto;
width: auto;

But none of these work. What I want to accomplish is that it goes to the next line, instead of going off screen.

Thank you for your time.

CodePudding user response：

You should use the property flex-wrap: wrap on the .container class because the default value is nowrap which doesn't allow the flex items(each character in our case) to continue on the new line. If each container is a new word, and you have a container wrapping those containers, then the flex-wrap: wrap should be applied on that too. Let me know if it works.