我正在尝试对个人和电话的文本进行换行。我想出了如何换行文本,但我无法让它与其他文本对齐。
现行代码
document.getElementById("department").innerHTML = department[i]
document.getElementById("location").innerHTML = locationA[i]
document.getElementById("people").innerHTML = peopleCurrentVarStr.replace(/,/g, "<br>")
document.getElementById("phone").innerHTML = phoneNumberStr.replace(/,/g, "<br />")
span.a {
width: 100px;
height: 100px;
background-color: yellow;
}
<h1>DEPARTMENT: <span class="a" id="department"></span></h1>
<h1>LOCATION: <span class="a" id="location"></span></h1>
<h1>INDIVIDUAL: <span class="a" id="people"></span></h1>
<h1>PHONE: <span class="a" id="phone"></span></h1>
3条答案
按热度按时间8i9zcol21#
对于你的innerHTML,你应该把它们输出到列表
<ul><li></li></ul>
中vjhs03f72#
首先,出于安全性和性能方面的考虑,你应该尽可能避免使用
innerHTML
。而且,当你正在处理的文本不包含任何HTML时,你绝对不应该使用.innerHTML
,而应该使用.textContent
。然后,在你的JavaScript字符串中,你可以使用转义码来新建一行:\n
。此外,您使用
h1
是不正确的。标题元素(h1...h6
)应该用于设置文档结构,而不是因为它们样式化文本的方式。因此,页面上应该很少有多个h1
。最后,对于你的问题,如果你简单地将每一段数据放入它自己的
span
元素中,并使用CSS将这些span
设置为inline-block
,那么你可以为元素中包含的两列数据设置一个宽度,你就可以设置好了:ojsjcaue3#
你的代码呈现的方式,看起来更像是一个定义列表和一堆标题。