I have an xslt code to display an XML file as tree view. The problem is that there are extra line breaks in the generated html list. I added normalize-space to remove extra lines but still there are extra line breaks left. Here is the xslt code:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">   <xsl:output omit-xml-declaration="yes"/>   <xsl:strip-space elements="*" />   <xsl:template match="comment()">     <li>&lt;!--<xsl:value-of select="." disable-output-escaping="yes"/>--&gt;</li>   </xsl:template>   <xsl:template match="comment()[contains(., 'inline-figure')]">     <xsl:copy/>   </xsl:template>   <xsl:template match="/">     <ul><xsl:apply-templates/></ul>   </xsl:template>   <xsl:template match="*">     <li><span>       <xsl:if test="*">           <xsl:attribute name="class">             <xsl:value-of select="'caret caret-down'"/>           </xsl:attribute>         </xsl:if>         <xsl:value-of select="concat('&lt;',name())"/>         <xsl:for-each select="@*">           <xsl:value-of select="concat(' ', name(), '=', '&quot;', ., '&quot;')"/>         </xsl:for-each>         <xsl:choose>           <xsl:when test="text() or *">             <xsl:value-of select="'&gt;'"/>           </xsl:when>           <xsl:otherwise>             <xsl:value-of select="'/&gt;'"/>           </xsl:otherwise>         </xsl:choose></span>       <xsl:if test="text()">         <xsl:value-of select="text()"/>       </xsl:if>       <xsl:if test="*">         <ul class="nested active"><xsl:apply-templates/></ul>       </xsl:if>       <xsl:if test="text() or *">         <span><xsl:value-of select="concat('&lt;','/' ,name() , '&gt;')"/></span>       </xsl:if></li>   </xsl:template>   <xsl:template match="*/text()[normalize-space()]">     <xsl:value-of select="normalize-space()"/>   </xsl:template>   <xsl:template match="*/text()[not(normalize-space())]" /> </xsl:stylesheet> 

Here is a sample input:

<?xml version="1.0"?> <catalog>    <book id="bk101">       <author>Gambardella, Matthew</author>       <title>XML Developer's Guide</title>       <genre>Computer</genre>       <price>44.95</price>       <publish_date>2000-10-01</publish_date>       <description>An in-depth look at creating applications        with XML.</description>    </book> </catalog> 

Here is the current output:

<xmp id="example"> <ul><li> <span class="caret caret-down">&lt;catalog&gt;</span><ul class="nested active"><li> <span class="caret caret-down">&lt;book id="bk101"&gt;</span><ul class="nested active"> <li> <span>&lt;author&gt;</span>Gambardella, Matthew<span>&lt;/author&gt;</span> </li> <li> <span>&lt;title&gt;</span>XML Developer's Guide<span>&lt;/title&gt;</span> </li> <li> <span>&lt;genre&gt;</span>Computer<span>&lt;/genre&gt;</span> </li> <li> <span>&lt;price&gt;</span>44.95<span>&lt;/price&gt;</span> </li> <li> <span>&lt;publish_date&gt;</span>2000-10-01<span>&lt;/publish_date&gt;</span> </li> <li> <span>&lt;description&gt;</span>An in-depth look at creating applications        with XML.<span>&lt;/description&gt;</span> </li> </ul> <span>&lt;/book&gt;</span> </li></ul> <span>&lt;/catalog&gt;</span> </li></ul></xmp> 

and here is the css i used:

 ul {     display: inline;     margin-bottom: -10px; }  li {      display: inline; }  .caret {     display: inline;     cursor: pointer;     -webkit-user-select: none; /* Safari 3.1+ */     -moz-user-select: none; /* Firefox 2+ */     -ms-user-select: none; /* IE 10+ */     user-select: none; }      .caret::before {         content: "\25B6";         color: black;         display: inline;         margin-right: 5px;     }  .caret-down::before {     display: inline;     -ms-transform: rotate(90deg); /* IE 9 */     -webkit-transform: rotate(90deg); /* Safari */ }  .nested {     display: none; }  .active {     display: block; }  

The output looks like this: extra line breaks