перенести дополнительный текст span на следующую строку - PullRequest
Новая
       32

перенести дополнительный текст span на следующую строку

0 голосов
/ 27 ноября 2018

Я пытаюсь перенести дополнительный текст на следующую строку, используя 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>

1 Ответ

0 голосов
/ 27 ноября 2018

Если я понимаю ваш вопрос, то здесь есть несколько вещей, которые нужно изменить.Во-первых, к <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>
...