I am developing a new card type. I want a line on the back of the user’s card to look like this…
Mnemonic: {{Mnemonic}}
…where the label is in a smaller font and the field content is in a different color text. That all works fine. But I can’t get rid of a line break after the colon.
In the card template I have:
<div class=“answer”>
<span class=“reminder”>Mnemonic: </span><span id=“Item0” class=“mnemonic”>{{Mnemonic}}</span>
<div>
and in the CSS I have:
.card {
font-family: arial;
font-size: 20px;
text-align: center;
color: black;
background-color: white;
}
.card .mnemonic {
color: magenta;
}
.card .reminder {
font-size: 60%;
}
.card .answer {
text-align: left;
}
In Anki there’s always a line break after the colon, regardless of window/card width. In Firefox/Chrome/Safari, there’s not.
EDIT: replacing the second line of the card template excerpt with…
{{#Mnemonic}} <span>Mnemonic</span><span id=“Item0”>{{Mnemonic}}</span></span>
…still causes a line break between the <span>s. So it has nothing to do with the colon or space that ended the first span—it’s the multiple spans alone that generates the line break. Is this not a bug?