JavaScript动态添加段落内粗体文本换行问题求助

你遇到的问题大概率是因为String.prototype.bold()生成的<b>标签被CSS设置成了块级元素（display: block），导致它独占一行，没法和前面的文本处于同一行。下面给你几个靠谱的解决办法：

方法1：替换bold()方法，用行内粗体标签拼接 #

bold()是比较老旧的API，它生成的<b>标签很容易被全局CSS或框架自定义样式影响。换成<strong>标签或者带内联样式的<span>来实现粗体，能更可控：

用模板字符串（ES6+，写法更简洁）： #

var paraNode = document.createElement('p');
paraNode.className = "card card-body";
// <strong>默认是行内元素，不会强制换行
var textToAppend = ` Passenger Revenue for ${month} ${year}: <strong>${totalValue}</strong>`;
paraNode.innerHTML = textToAppend;
notebookElement.appendChild(paraNode);

兼容ES5的写法： #

var paraNode = document.createElement('p');
paraNode.className = "card card-body";
var textToAppend = " Passenger Revenue for " + month + " " + year + ": <strong>" + String(totalValue) + "</strong>";
paraNode.innerHTML = textToAppend;
notebookElement.appendChild(paraNode);

如果担心全局样式影响<strong>，可以直接用内联样式强制锁定行内粗体：

var textToAppend = ` Passenger Revenue for ${month} ${year}: <span style="font-weight:bold; display:inline;">${totalValue}</span>`;

方法2：调整CSS，确保粗体元素是行内显示 #

如果不想修改JS代码，可以检查你的CSS规则，看是不是给<b>/<strong>加了display: block。添加下面的CSS规则，强制让.card-body里的粗体元素保持行内：

.card-body b, .card-body strong {
  display: inline !important;
  font-weight: bold;
}

方法3：用DOM节点拼接（更安全，避免XSS风险） #

如果totalValue是用户输入的内容，用innerHTML可能存在XSS风险，推荐直接创建DOM节点来拼接内容：

var paraNode = document.createElement('p');
paraNode.className = "card card-body";

// 先添加普通文本部分
paraNode.appendChild(document.createTextNode(" Passenger Revenue for " + month + " " + year + ": "));

// 创建粗体元素并设置内容
var boldElement = document.createElement('strong');
boldElement.textContent = String(totalValue);
paraNode.appendChild(boldElement);

notebookElement.appendChild(paraNode);

这种方式完全不受CSS对<b>标签的影响，而且通过DOM节点追加的方式，能确保所有内容自然处于同一行。

内容的提问来源于stack exchange，提问作者Hannan