Nested span elements where parent is server-side

Question

In ASP.Net (4.5.2) I have nested <span> elements where the parent is a set as a server side control...

<p>
  This is the start of the text
  <span runat="server" visible="<%#someCode%>">
    This is some more Text
    <span class="myClass">with some other text inside</span>
    And a bit more after
  </span>
</p>

(Note, this is contained within a <asp:Repeater>)

It appears that ASP.Net doesn't cope with this, and appears to assume the inner </span> is the closure for the outer element. Meaning that when the visible="false" it will render like this...

<p>
  This is the start of the text
    And a bit more after
  </span>
</p>

I cannot convert either <span> into a <div> or <section> as it has to live within a <p> element (meaning the child elements cannot be blocks).

Is there any way to get around this issue?

Answer 1

OK then (too many comments).

Alternatively use a Label:

<p>
    This is the start of the text
    <asp:Label ID="Label1" runat="server" Visible="false" Text="This is some more Text">
        <span class="myClass">with some other text inside</span>
        And a bit more after
    </asp:Label>                    
</p>

or even:

<p>
    This is the start of the text
    <asp:Label ID="Label1" runat="server" Visible="true" Text="This is some more Text<span class='myClass'>with some other text inside</span>And a bit more after">                
    </asp:Label>                    
</p>

Answer 2

Turns out the answer is quite simple... make the inner <span> a server-side control as well...

<p>
  This is the start of the text
  <span runat="server" visible="<%#someCode%>">
    This is some more Text
    <span runat="server" class="myClass">with some other text inside</span>
    And a bit more after
  </span>
</p>

Which results in ...

<p>
  This is the start of the text
</p>