在 Algolia 中包装整个搜索热门词答案

【问题标题】：Wrap whole search hit word in Algolia在 Algolia 中包装整个搜索热门词
【发布时间】：2017-10-02 09:23:46
【问题描述】：

有没有办法让 Algolia 包装搜索命中中突出显示的整个单词？因为现在它可能会导致单词在渲染时分成两部分。例如，假设我搜索了单词«example»，然后我得到一个标题为：«有很多很好的例子说明如何做到这一点»。用于此的 HTML 将是 <div>There are many good <em>example</em>s for how to do this</div>，如果给定一个窄元素，则可以像这样呈现：

There are many good example
s for how to do this

是否有此设置，或者我必须对此进行正则表达式/巫术？

编辑：我发现单词中断的原因是因为我设置了em {display:inline-block}，我需要它来进行样式设置。我可以解决这个问题，但将突出显示的单词以某种方式包装会更干净，例如：<span><em>example</em>s</span>

【问题讨论】：

标签： algolia

【解决方案1】：

这可能是与word-break 相关的css 问题，内联元素不应中断流程，请参阅此笔：https://codepen.io/Haroenv/pen/zEdyZb

div {
  font-size: 2em;
  margin-bottom: 1em;
}

.broken {
  word-break: break-all;
}

.keep {
  word-break: keep-all;
}

<div class="normal">There are many good <em>example</em>s for how to do this</div>
<div class="broken">There are many good <em>example</em>s for how to do this</div>
<div class="keep">There are many good <em>example</em>s for how to do this</div>

【讨论】：

是的，在玩了一些示例之后，我发现它崩溃的原因是因为我的 CSS。我已经用 CSS 更新了我的问题。我还找到了我需要的解决方法，但是当我包含在我的编辑中时，使用整个单词的包装器仍然会很好。
这就是 inline-block 的行为方式，没有 Algolia 选项来包装这个词，如果真的需要的话，你必须自己使用一些正则表达式（如你所建议的那样）