Issue with word-spacing in search bar

Question

A client has asked me to create a search bar like this

I succeeded this far

Word-spacing works fine between the words, "Homepage", "Blog", and "Sample Page". but I don't know how to control the spacing between "Sample Page"?

Html code:

<div class="wp-block-navigation__responsive-container-content" id="modal-1-content">
<input type="search" id="wp-block-search__input-1" class="wp-block-search__input " name="s" 
value="Homepage Blog Sample Page" placeholder="" required="">

CSS Code:

.wp-block-search__input {
padding: 8px;
flex-grow: 1;
min-width: 26em;
border: 1px solid #949494;
font-size: inherit;
font-family: inherit;
line-height: inherit;
color: #6fabac;
direction: rtl;
word-spacing: 20px;
}

How to control the space between the text "Sample page"?

Answer 1

You can just add spaces, you don't need to use word spacing for this. The only downside of this is that when sending a post, it would show up as "Homepage(  spam)Blog(  spam)Sample Page".

.wp-block-search__input {
padding: 8px;
flex-grow: 1;
min-width: 26em;
border: 1px solid #949494;
font-size: inherit;
font-family: inherit;
line-height: inherit;
color: #6fabac;
direction: rtl;
}

<div class="wp-block-navigation__responsive-container-content" id="modal-1-content">
<input type="search" id="wp-block-search__input-1" class="wp-block-search__input " name="s" 
value="Homepage&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Blog&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sample Page" placeholder="" required="">

nbsp; would be a more future-proof method of doing this, but you can just substitute it with spaces like the other answers if you really need to.

This is the only way to do it, since "Sample Page" is not a single word, it is multiple, so you cannot trick the browser into thinking that it is.

You can change the size of the word spacing by changing the amount of   there is. By the way, if you are wondering, there is the placeholder attribute if that is what you're looking for. It would be better to have this for a search bar.

You can read more about HTML entities, like nbsp; (Non-Breaking Space) here.

Answer 2

I am not sure having the text as values within the input is the best way to achieve what you desire. I would be asking myself why do I need to do it this way?

However to answer your question directly, why not just simply use spaces to add space?

.wp-block-search__input {
  padding: 8px;
  flex-grow: 1;
  min-width: 26em;
  border: 1px solid #949494;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: #6fabac;
  direction: rtl;
}

<div class="wp-block-navigation__responsive-container-content" id="modal-1-content">
  <input type="search" id="wp-block-search__input-1" class="wp-block-search__input " name="s" value="Homepage        Blog        Sample Page" placeholder="" required="">