CODEWITHSUNDEEP
algolia
peirix
peirix

Reputation: 37771

Wrap whole search hit word in Algolia

Is there a way to have Algolia wrap the entire word that is highlighted in search hits? Because right now it may cause the word to break in two when being rendered. As an example, say I've searched for the word «example», and then I get a result on a title that is: «There are many good examples for how to do this». The HTML for this would then be <div>There are many good <em>example</em>s for how to do this</div>, which, given a narrow element could be rendered like this:

There are many good example
s for how to do this

Is there even a setting for this, or would I have to regex/voodoo this?

Edit: I found that the reason the word breaks is because I've set em {display:inline-block}, which I need for styling purposes. I could work around that, but it would be cleaner to just have the highlighted word wrapped in some way, eg: <span><em>example</em>s</span>

Upvotes: 0

Views: 80

Answers (1)

Haroen Viaene
Haroen Viaene

Reputation: 1360

This is probably a css issue related to word-break, inline elements shouldn't break the flow, see this pen: 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>

Upvotes: 0

Related Questions