For a web page, I want to have a paragraph with disguised words, much like hangman. But instead of guessing letters, they guess words.

So you might see:

_ _ _ _ _     _ _ _

Then if they guess 'there', you would get:

there _ _ _

But I don't want the words and text to jump around as words are guess correctly. Like _ _ _ _ _ takes up more width than 'there', so when they guess it, the _ _ _ would jump to the left, if you know what I mean.

Also, _ _ _ _ _ has spaces in between the chars otherwise you would get _____. So if I simply replace each _ in _ _ _ _ _ you would get 't h e r e' which isn't what I want either.

Anyone know what I mean and how to make this look good?

Also, I am doing this in Blazor if that matters.

CodePudding user response：

What your searching for are monospaced fonts: https://en.wikipedia.org/wiki/Monospaced_font

See this for a list of known monospaced fonts: https://en.wikipedia.org/wiki/List_of_monospaced_typefaces

There are a bunch of monospaced fonts provided by GoogleFonts: https://fonts.google.com/?category=Monospace

By using one of them every character including a space will take the same width.