Ways to avoid unwanted whitespace in Phoenix templates?

I’m generating breadcrumbs in my Phoenix template and the result when I keep the code clean (across many lines and indented) is extra white space and line breaks. This has an adverse effect on the HTML being rendered (extra spaces in front of the crumb text). I can “fix” the issue by compacting my Phoenix template code to a long one liner but this doesn’t feel very elegant. Any other suggestions?

<%= for crumb_info <- @crumbs do %>
	<%= if crumb_info == List.last(@crumbs) do %>
		<li class="breadcrumb-item active" aria-current="page">
	<% else %>
		<li class="breadcrumb-item">
	<% end %>

	<%= if Keyword.has_key?(crumb_info, :link) do %>
		<%= link crumb_info[:title], to: crumb_info[:link] %>
	<% else %>
		<%= crumb_info[:title] %>
	<% end %>

	</li>
<% end %>

You can use -%> to “collapse” following whitespace when closing.

1 Like
def build_breadcrumb(crumbs) do
  for crumb_info <- crumbs do
    active_class = if crumb_info == List.last(crumbs), do: "active", else: ""

    text = 
      if Keyword.has_key?(crumb_info, :link) do
        link(crumb_info[:title], to: crumb_info[:link])
      else
        crumb_info[:title]
      end
   
    content_tag(:li, text, class: "breadcrumb-item #{active_class}")
  end
end

Also there are ways n CSS to not render whitespace. E.g. using display: flex.

2 Likes