Shortcode resulting in extra spaces near punctuation despite hyphens

[acyberrain]

Hello everyone,

I’m stumped by this issue. I have an abbreviations shortcode at “abbr.html” that says the following:

{{ $entry := (.Get 0 | lower) }}
{{ $count_id := print $entry "_count"}}

{{ range $.Site.Data.terms }}
    {{ if eq  ( .abbreviation | lower) $entry }}
        <abbr title="{{- .term -}}">{{- .abbreviation -}}</abbr>
    {{ end }}
{{ end }}

Usage example:
Others view it as just {{< abbr "IT" >}}, perhaps on steroids if they're more open minded.

Result:
Others view it as just IT , perhaps on steroids if they’re more open minded.

HTML on page looks like this:

CSS related to tooltip:

abbr[title] {
  position: relative;
  
  /* ensure consistent styling across browsers */
  text-decoration: underline dotted;
}

abbr[title]:hover::after,
abbr[title]:focus::after {
  content: attr(title);
  
  /* position tooltip like the native one */
  position: absolute;
  left: 0;
  bottom: -30px;
  width: auto;
  white-space: normal;
  
  /* style tooltip */
  background-color: #1e1e1e;
  color: #fff;
  border-radius: 3px;
  box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.4);
  font-size: 14px;
  padding: 3px 5px;
}

The “terms.yaml” which houses these abbreviations looks like this:

- term: Information Technology
  abbreviation: IT

Note the extra space after “IT”, just before the comma.
It works great when there are no punction marks and only results in single whitespaces as expected.
I’m not finding what is making this result. Any thoughts would be greatly appreciated, please let me know if any additional pages are of interest… This is the only shortcode I employ for the site.

[jmooring]

When a shortcode or render hook renders an inline element, you need to trim whitespace. I just trim at the beginning of each line, and make sure I trim the trailing space at the end of the template:

{{- $entry := (.Get 0 | lower) }}
{{- $count_id := print $entry "_count"}}

{{- range $.Site.Data.terms }}
  {{- if eq  ( .abbreviation | lower) $entry -}}
    <abbr title="{{- .term -}}">{{ .abbreviation }}</abbr>
  {{- end }}
{{- end -}}

Rendered:

<p>Others view it as just <abbr title="Information Technology">it</abbr>, perhaps on steroids if they&rsquo;re more open minded.</p>

https://gohugo.io/templates/introduction/#whitespace

[acyberrain]

Genius, thank you! I have been trying hyphen combinations in so many ways but did not deduce putting it at the start of each line. This works perfectly!