将 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> 有一个边距，这导致您在将它添加到文档时注意到这个垂直 "jump"。尝试添加以下 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>

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

wrap span's extra text to next line

javascript

css

text

word-wrap