Question

我正在尝试使用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;
}

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>

将span的多余文本包装到下一行

1 个答案: