# How to get rid of line break (card template)? \[Edited w/ new info\]

**URL:** <https://forums.ankiweb.net/t/how-to-get-rid-of-line-break-card-template-edited-w-new-info/6048>\
**Category:** Card Design\
**Created:** [December 26, 2020, 11:15pm UTC](https://forums.ankiweb.net/t/how-to-get-rid-of-line-break-card-template-edited-w-new-info/6048 "2020-12-26T23:15:18Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![brec](https://avatars.discourse-cdn.com/v4/letter/b/b5ac83/32.png) [@brec](https://forums.ankiweb.net/u/brec)\
**Post date:** [December 26, 2020, 11:15pm UTC](https://forums.ankiweb.net/t/how-to-get-rid-of-line-break-card-template-edited-w-new-info/6048/1 "2020-12-26T23:15:18Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![kelciour](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/kelciour/32/14770_2.png) [@kelciour](https://forums.ankiweb.net/u/kelciour)\
**Post date:** [December 30, 2020, 1:17am UTC](https://forums.ankiweb.net/t/how-to-get-rid-of-line-break-card-template-edited-w-new-info/6048/2 "2020-12-30T01:17:02Z")

</div>

I think this is because the field contains a `<div>` tag. Maybe the field was edited and a new line was added. In this case, a new `div` tag could appear.

 ![](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/5/55abe14f9b67c54755e983eddfd086fa5fe792de.png)

A few possible solutions.

1. Replace `{{Mnemonic}}` with {{text:Mnemonic}} in the card template to strip all HTML tags.

2. Add something similar to the Styling section in the card template.

3. Use the card browser and Find - Replace with regular expressions to replace `<div>|</div>` with an empty string.

The [AnkiWebView Inspector](https://ankiweb.net/shared/info/31746032) add-on might be helpful in such cases.

---

<div class="post-metadata">

**Author:** ![brec](https://avatars.discourse-cdn.com/v4/letter/b/b5ac83/32.png) [@brec](https://forums.ankiweb.net/u/brec)\
**Post date:** [December 30, 2020, 6:28pm UTC](https://forums.ankiweb.net/t/how-to-get-rid-of-line-break-card-template-edited-w-new-info/6048/3 "2020-12-30T18:28:21Z")

</div>

Thanks @kelciour. However, there are no HTML tags in any of the test card Mnemonic field contents. If I insert “text:” as you suggested in your item 1, I still get the line break, but I lose any graphic content in the Mnemonic field.

---

<div class="post-metadata">

**Author:** ![kelciour](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/kelciour/32/14770_2.png) [@kelciour](https://forums.ankiweb.net/u/kelciour)\
**Post date:** [December 30, 2020, 6:49pm UTC](https://forums.ankiweb.net/t/how-to-get-rid-of-line-break-card-template-edited-w-new-info/6048/4 "2020-12-30T18:49:31Z")

</div>

Maybe your Styling section contains something like this to make it look like there’s a line break after "Mnemonic: ".

```auto
.reminder {
  display: block;
}

```

I can’t think of anything else. I’d suggest to either install the [AnkiWebView Inspector](https://ankiweb.net/shared/info/31746032) add-on or set the env var QTWEBENGINE\_REMOTE\_DEBUGGING to 8080 prior to starting Anki to enable Chrome DevTools. With Chrome DevTools it should be clear why there’s a line break.

[https://addon-docs.ankiweb.net/#/porting2.0?id=webview-changes](https://addon-docs.ankiweb.net/#/porting2.0?id=webview-changes)

Otherwise, maybe export one card as an apkg file and upload it on [https://gofile.io/](https://gofile.io/) or something similar.

---

<div class="post-metadata">

**Author:** ![brec](https://avatars.discourse-cdn.com/v4/letter/b/b5ac83/32.png) [@brec](https://forums.ankiweb.net/u/brec)\
**Post date:** [December 30, 2020, 7:47pm UTC](https://forums.ankiweb.net/t/how-to-get-rid-of-line-break-card-template-edited-w-new-info/6048/5 "2020-12-30T19:47:34Z")

</div>

Yesterday [I posted](https://forums.ankiweb.net/t/new-card-type-law-lists/6111) a link to a sample .apkg in a description of my card note project.

---

<div class="post-metadata">

**Author:** ![hkr](https://avatars.discourse-cdn.com/v4/letter/h/c6cbf5/32.png) [@hkr](https://forums.ankiweb.net/u/hkr)\
**Post date:** [December 30, 2020, 8:28pm UTC](https://forums.ankiweb.net/t/how-to-get-rid-of-line-break-card-template-edited-w-new-info/6048/6 "2020-12-30T20:28:02Z")

</div>

Hi @brec,

Apparently, the `display` attribute of the mnemonic element(`id="Item0" class="mnemonic"`) is set to `block` by the following line in the `showItem()` function :

```javascript
theItem.style.display = "block";	// reveal

```

Screenshot:

 ![mnemonic](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/4/4741450ee060a241a7300f43ae160d23d0426148.png)

---

<div class="post-metadata">

**Author:** ![brec](https://avatars.discourse-cdn.com/v4/letter/b/b5ac83/32.png) [@brec](https://forums.ankiweb.net/u/brec)\
**Post date:** [December 30, 2020, 9:26pm UTC](https://forums.ankiweb.net/t/how-to-get-rid-of-line-break-card-template-edited-w-new-info/6048/7 "2020-12-30T21:26:17Z")

</div>

@hkr, this was indeed the problem! (Part of the problem was that I didn’t fully understand the function of the `block` attribute.) I have updated the note type’s back template to set the mnemonic’s display attribute to` inline-block` and then to get the buttons on a new line after the mnemonic I have enclosed them in their own `<div>`.

Version 1.1 of the .apkg sample is at

> **[Law Lists note type 1.1.apkg](https://drive.google.com/file/d/1eYdqczY428EgJX7u10pjh15VFDkF6_iV/view)**
>
> Google Drive file.

---

<div class="post-metadata">

**Author:** ![brec](https://avatars.discourse-cdn.com/v4/letter/b/b5ac83/32.png) [@brec](https://forums.ankiweb.net/u/brec)\
**Post date:** [December 30, 2020, 9:34pm UTC](https://forums.ankiweb.net/t/how-to-get-rid-of-line-break-card-template-edited-w-new-info/6048/8 "2020-12-30T21:34:46Z")

</div>

@hkr, P.S. What software is that a screenshot of?

---

<div class="post-metadata">

**Author:** ![hkr](https://avatars.discourse-cdn.com/v4/letter/h/c6cbf5/32.png) [@hkr](https://forums.ankiweb.net/u/hkr)\
**Post date:** [December 30, 2020, 10:29pm UTC](https://forums.ankiweb.net/t/how-to-get-rid-of-line-break-card-template-edited-w-new-info/6048/9 "2020-12-30T22:29:47Z")

</div>

It’s Anki ⁨2.1.38 (Windows version). I customized the top bar and the bottom bar using css and javascript. The panel at the right side is AnkiWebView Inspector add-on (which I published to Ankiweb).

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/8f1279ababc5879d54e4838989f606cfe55af8c7.jpeg) [@system](https://forums.ankiweb.net/u/system)\
**Post date:** [May 1, 2023, 7:42am UTC](https://forums.ankiweb.net/t/how-to-get-rid-of-line-break-card-template-edited-w-new-info/6048/10 "2023-05-01T07:42:16Z")

</div>