JQuery .text（）方法输出乱码

Question

所以我在使用JQuery的.text（）方法时遇到了一个奇怪的问题。我现在所拥有的是一些JS代码，它从几组随机单词生成一个随机短语，我相信这没有问题（它基本上只生成一个字符串）。当您单击浏览器中的链接时，该链接的文本将被随机短语生成器生成的随机短语替换。到目前为止，生成的随机短语没有任何问题。但是，它往往会玷污它背后的文字：

似乎浏览器在将文本推送到下一行时遇到困难，导致它与已存在的文本重叠。 当我突出显示段落时，它会重置＆＃34;重置＆＃34;这是正确的，直到我再次尝试点击链接。如果我放大或缩小，看起来它很好，直到我恢复100％变焦。如果我使文本字体更小，它似乎也可以正常工作。

以下是Javascript代码：

//Initially get random phrase and display it on the page
getRandomPhrase();
$('#phrase').text(finalPhrase.new);

//On click, get the random phrase and display it on the page
$('#phrase').click(function () {
    getRandomPhrase();
    $('#phrase').text(finalPhrase.new);
});

以下是我尝试替换的HTML代码：

<a title="Click!" href="#about" id="phrase">(the random phrase should be in here)</a>

标签位于文本段落的中间。如果有人知道如何解决这个问题会很棒！

编辑：这里有所有的CSS，不知道问题可能是什么。我在Bootstrap上使用它：

@import url(http://fonts.googleapis.com/css?family=Roboto);
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab);
body {
    font-family: 'Roboto', sans-serif;
    background-color: #FFF7E4;
    font-size: 14px;
}

h1 {}

hr {
    border-color: #9A9A9A;
}

#name {
    font-family: 'Roboto Slab', serif;
    margin-top: 0px;
    font-size: 80px;
    color: #DB1C00;
}

#header {
    font-size: 20px;
    color: white;
    padding-top: 70px;
    padding-bottom: 40px;
    background-color: #CCC6A6;
}

#about {
    font-size: 20px;
}

#phrase {
    color: #DB1C00;
}

Answer 1

我刚刚设法解决了这个问题。但解决方案很奇怪。 我应该在原帖中添加更多HTML。

以下是前端HTML的基本视图：

<div id="about">blah blah blah about me stuff 
    <a title="Click!" href="#about" id="phrase">(the random phrase should be in here)</a>
</div>

我已将标签中的链接发送到#about，这根本没有错。 （我这样做的原因是因为用户需要能够点击链接并留在那里查看结果）。我将href更改为#phrase，从而将链接链接到自身：

<div id="about">blah blah blah about me stuff 
    <a title="Click!" href="#phrase" id="phrase">(the random phrase should be in here)</a>
</div>

这解决了整个乱码文本问题。我的假设是，链接到整个div在某种程度上不允许它正确重置，或者它以某种方式缓存div的原始内容。无论如何，如果有人能够正确解释为什么这样做会很好哈哈。如果有人有好的解释，请告诉我！这是一个非常奇怪的解决方案，我不知道它为什么会起作用（或者为什么首先出现问题！