我正在尝试使用CASE
将多余的文本包装到下一行,但是问题是当您单击时,overflow-wrap: break-word
下移到下一行,然后多余的文本在下一行中断。
我希望黄色文本“ BlaBla:”与文本“ sometextssomet ...”位于同一行,但是我希望对“ sometextssomet ...”文本应用span
overflow-wrap: break-word;
元素内部。
我在做什么错了?
<p>
document.addEventListener('mousedown', () => {
let name = document.createElement("p");
name.className = 'Name'
name.innerHTML = 'BlaBla: '
name.style = `height:40px; color: #f4c41f`
document.getElementsByClassName('main')[0].appendChild(name)
let text = document.createElement("span");
text.innerHTML = `sometextssometextssometextssometextssometexts`
text.style = `overflow-wrap: break-word; font-size:14px; color: #ffffff; background: none; `
document.getElementsByClassName('Name')[0].appendChild(text)
})
.main {
position: relative;
width: 250px;
height: 140px;
overflow-wrap: break-word;
background-color: gray;
}
答案 0 :(得分:1)
如果我理解您的问题,那么这里有几件事需要更改。首先,<p>
默认情况下会应用边距,这会导致您在添加到文档中时注意到此垂直“跳转”。尝试添加以下CSS来解决此问题:
p {
margin-top:0;
}
此外,请考虑为创建的<span>
添加<p>
,以同时显示黄色的“ blabla”文本和白色文本,以使break-word
CSS规则按要求工作以下:
document.addEventListener('mousedown', () => {
// Create span for each piece of text with different styling
let blabla = document.createElement("span");
blabla.innerText = 'BlaBla:'
blabla.style = 'color:yellow'
let text = document.createElement("span");
text.innerText = `sometextssometextssometextssometextssometexts`
// Append both span elements to the paragraph where word spacing should
// be applied
let name = document.createElement("p");
name.appendChild(blabla);
name.appendChild(text);
document.querySelector('.main').appendChild(name)
})
.main {
position: relative;
width: 250px;
height: 140px;
background-color: gray;
}
p {
position: relative;
margin-top:0;
display:block;
color:white;
}
span {
overflow-wrap: break-word;
}
<div class="main" id="main0"></div>