I added color to make sure I was really working with span that I thought I was working with.

The CSS:
div.Main {
display: block;
color:black;
font-size: 10pt;
line-height: 12pt;
margin: 0 0 0 0;
padding: 0 0 0 0;
page-break-inside: auto ;
text-align: left;
background-color: pink ;
widows: 2 ;
orphans: 2 ;
}
div.Minor {
display: block;
color:black;
font-size: 10pt;
line-height: 12pt;
margin: 0;
padding: 0 0 0 0;
page-break-inside: auto ;
text-align: left;
widows: 2 ;
orphans: 2 ;
background-color: yellow ;

}

.Exapmle_Group { margin-left: 0 ; }
.Example_Sentence:first-of-type {font-weight: bold ; !important }
.Example_Sentence { font-weight: normal ; background-color:green}



<div class="Main">
<a class="Lemma" id="hvo15434">-er</a>
<span class="Part_Of_Speech" lang="es">v. &gt; s.</span>
<span class="Comment">Indica al que lleva a cabo la acción; por ejemplo:</span>
<span class="Example_Group">
<span class="Example_Sentence" lang="en">worker</span>
<span class="Example_Sentence" lang="es">trabajador;</span>
</span>
<span class="Example_Group">
<span class="Example_Sentence" lang="en">lexicographer</span>
<span class="Example_Sentence" lang="es">lexicógrafo.</span>
</span>
<span class="Variant_Group">
<span class="Lexical_Function" lang="es">Var.</span>
<span class="Variant_Form">-or</span></span>
</div>

What is causing the word to run into the gap?

You can ignore "text in gap.png" attachment ... I couldn't figure out how to delete it.

Jim Albright
Wycliffe Bible Translators

1. tex in gap2.png‎ 75.0 kB
2. text in gap.png‎ 81.8 kB

changing the word to
abcdefghijklmnopqrstuvwxyz.
didn't help.

Jim Albright
Wycliffe Bible Translators

First thought would be "white-space: pre", or "white-space: nowrap", or use of non-break space characters.

changing
<span class="Example_Sentence" lang="en">lexicographer</span><span class="Example_Sentence" lang="es">lexicógrafo.</span>
to
<span class="Example_Sentence" lang="en">lexicographer</span> <span class="Example_Sentence" lang="es">lexicógrafo.</span>

fixes problem. But I want it to work without adding the space.

Jim Albright
Wycliffe Bible Translators

Text that is not separated by spaces has no break points, unless you explicitly add a zero-width space character (U+200B).

Thanks. Learn something new every day.

Jim Albright
Wycliffe Bible Translators

So by adding
<xsl:output indent="yes" method="xhtml"/>
the problem of text running into margin or gap is fixed.
But now I have new problem:
.Variant_Group:before {content: " ["; type-style: normal ; font-weight: normal ; }
.Variant_Group:after { content: "]" !important ; type-style: normal ; font-weight: normal ; }
Should add [] around text inside but now I get and added space
[ text ] instead of [text]

I tried adding negative margins to bring the [] up closer to text which worked well except when the [
was at the end of the line. See end of post.

.Variant_Group:before {margin-right: -2pt ; content: " ["; type-style: normal ; font-weight: normal ; }
.Variant_Group:after { margin-left: -2pt ; content: "]" !important ; type-style: normal ; font-weight: normal ; }


<div class="Main">
<a class="Lemma" id="hvo15434">-er</a>
<span class="Part_Of_Speech" lang="es">v. &gt; s.</span>
<span class="Comment">Indica al que lleva a cabo la acción; por ejemplo:</span>
<span class="Example_Group">
<span class="Example_Sentence" lang="en">worker</span>
<span class="Example_Sentence" lang="es">trabajador;</span>
</span>
<span class="Example_Group">
<span class="Example_Sentence" lang="en">lexicographer</span>
<span class="Example_Sentence" lang="es">lexicógrafo.</span>
</span>
<span class="Variant_Group">
<span class="Lexical_Function" lang="es">Var.</span>
<span class="Variant_Form">-or</span>
</span>
</div>

<div class="Minor">
<a class="Lemma" id="hvo15468">-es</a>
<span class="Variant_Group">
<span class="Variant_Type">var. de</span>
<a class="Main_Entry_Form" href="#hvo15464">-s</a>
</span>
<span class="Definition">Indica plural.</span>
<span class="Notes_Grammar">Se presenta después de
<span class="Emphasis">s</span> y
<span class="Emphasis">z</span>.
</span>
</div>
----
<div class="Main">
<a class="Lemma" id="hvo15977">a</a>
<span class="Part_Of_Speech" lang="es">adj.</span>
<span class="Definition" lang="es">un, una</span>
<span class="Example_Group">
<span class="Example_Sentence" lang="en">I usually eat a banana with my breakfast cereal.</span>
<span class="Example_Sentence" lang="es">En el desayuno, normalmente como un plátano con el cereal.</span>
</span>
<span class="Variant_Group">
<span class="Lexical_Function" lang="es">Var.</span>
<span class="Variant_Form">an</span>;
<span class="Notes_Grammar">se presenta antes de una consonante o semi-vocal.</span>
</span>
</div>

Jim Albright
Wycliffe Bible Translators

1. sample.png‎ 19.9 kB
2. sample2.png‎ 8.6 kB
3. sample3.png‎ 10.0 kB

Instead of using XSLT indenting, which will add spaces where you might not want them, you can always add explicit spaces in sensitive locations using <xsl:text> </xsl:text> or similar.

Thanks for speedy reply. I'll redo XSLT now.

Jim Albright
Wycliffe Bible Translators

Adding zero width breaking space was the answer. I had some non-breaking spaces in text.

Jim Albright
Wycliffe Bible Translators