搜索栏中 word-spacing 的问题

Question

一位客户要求我创建这样的搜索栏

到目前为止我成功了

Word-spacing 在单词“主页”、“博客”和“示例页面”之间工作正常。但我不知道如何控制“示例页面”之间的间距？

Html代码：

<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代码：

.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;
}

如何控制space文字之间的“示例页”？

Answer 1

我不确定将文本作为输入中的值是否是实现您想要的效果的最佳方式。我会问自己 为什么我需要这样做?

但是要直接回答您的问题，为什么不直接使用 space 来添加 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="">

Answer 2

您可以只添加空格，不需要为此使用字间距。唯一的缺点是发送 post 时，它会显示为“主页（垃圾邮件）博客（垃圾邮件）示例页面”。

.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;这将是一种更 future-proof 的方法，但如果您真的需要，您可以像其他答案一样用空格替换它。

这是唯一的方法，因为“示例页面”不是一个词，而是多个词，所以您不能欺骗浏览器，让它认为它是。

您可以通过更改的数量来更改字间距的大小。有。顺便说一句，如果您想知道，如果您要找的是占位符属性。最好把这个做成搜索栏。

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

搜索栏中 word-spacing 的问题

Issue with word-spacing in search bar

css

word-spacing