0

What is the best (fastest) way to get rid of tabs and line breaks from my HTML code?

I'm using the mustache template system for javascript to build my website and when importing the templates which includes indentation for easier writing, reading and maintaining of the code. Though when importing the template I also get the tabs and line breaks that are used for the indentation. This means that the resulting page doesn't look like I wanted it to.

This is of course also the case when just writing HTML without some kind of template engine.

My question is now, what is the best way to get rid of this?

My current solution is to get the HTML - just as the documentation says - using $('#template').html(). After that I added the .replace function to remove the tabs and line breaks from the html.

Another way to get rid of it is of course to just remove all unwanted things from the HTML source though that would end in code that is a nightmare to maintain.

Are there any other (better) ways to deal with this?

I've setup two jsfiddles, one with mustache and one without. As you can see the first row is a few pixels wider.

Oskar Persson
  • 7,267
  • 12
  • 48
  • 107
  • can you do this manually at design time? in word? you can search and replace tabs with ^t. – tintyethan May 20 '14 at 20:21
  • This is actually a hard problem. Read this article, and read the comments as well: http://davidwalsh.name/remove-whitespace-inline-block – Joe Frambach May 20 '14 at 20:47

1 Answers1

0

When I ran into this, I simply use float:left for the elements (float:left without other display behaves like a display: block but the elemenet remains in line with the rest).

Just make sure to clear your floats. HTML:

  {{#items}}
    <a href="{{url}}">
      <div class="text">{{text}}</div>
    </a>
  {{/items}}
  <div style="clear:both"></div>

CSS:

a{
    margin-right: 12px;
    color: black;
    float: left;
}

http://jsfiddle.net/wMTh7/3/

RazvanDH
  • 702
  • 5
  • 8