将 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;
}

另外，考虑为黄色“blabla”文本和白色文本添加一个<span> 到创建的<p>，以允许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>