Truncate Display Text
When customizing Discovery Search templates, there may be times when the content you want to display is too long to display cleanly.
For example, suppose you performed a text extraction of an onboarding PDF document using Cognitive Toolkit. You wouldn’t want to display the entire page of text in the search result. Instead, you would want to truncate or trim the text for the result card template.
Discovery Search already does this in the default template for the fullText field, but you can truncate or trim the text for any custom field you wish.
Step-by-step:
To do trim the text in a template field:
add
data-truncate="n"(where n equals the number of characters you want to display) to your HTML tag
Example
For example, suppose you have an index field that has a lot of text. Let’s call that field comments. In some of your comment fields, you have values with over 1249 characters! It would look like this:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id commodo metus, in elementum orci. Quisque arcu nunc, tincidunt ut est at, faucibus pharetra ligula. Aliquam aliquam urna felis, maximus euismod mi gravida a. Nam egestas varius pellentesque. Donec vitae ultrices lectus. Vivamus urna risus, auctor vel massa sed, efficitur maximus nulla. Pellentesque efficitur lacus eget tellus bibendum, consectetur lobortis magna fermentum. Praesent eu urna vel ligula ullamcorper tempor. Nam porttitor arcu eros, eu condimentum quam feugiat nec. Praesent egestas nibh non diam venenatis consectetur. Nulla sapien ante, fringilla in mattis ut, efficitur eget erat. Mauris purus dolor, tincidunt nec tincidunt ac, ullamcorper quis nisi.
Fusce ornare, risus et lobortis dictum, lacus justo porta enim, eget hendrerit elit velit nec urna. Praesent ultrices ante nibh, eget blandit risus volutpat ut. Morbi ut augue in massa pellentesque feugiat a sit amet ligula. Praesent pharetra ipsum vel consequat aliquet. Nulla fringilla, dolor eu vehicula venenatis, libero mauris bibendum nisi, eget placerat tortor erat ut nulla. Nunc congue turpis sit amet magna efficitur, at mattis sapien finibus. Integer interdum nisl quis augue condimentum eleifend.
With data-truncate, you can set the maximum characters to display. In this case, we’ve selected to trim the content at 300 characters.
<div class="result-preview text-wrap-row" data-truncate="300">{{result.Document.Source.comments}}</div>Result:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id commodo metus, in elementum orci. Quisque arcu nunc, tincidunt ut est at, faucibus pharetra ligula. Aliquam aliquam urna felis, maximus euismod mi gravida a. Nam egestas varius pellentesque. Donec vitae ultrices lectus. Vivamus u…