javascript - 将 span 的额外文本换行到下一行

Question

我正在尝试使用 overflow-wrap: break-word 将额外的文本换行到下一行但问题是当你点击时，span向下移动到下一行然后额外的文本在下一行中断。

我希望黄色文本“BlaBla:”与文本“sometextssomet...”位于同一行，但是我希望“sometextssomet...”文本具有 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;
}

<div class="main" id="main0"></div>

Answer 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>