Перенести лишний текст span на следующую строку
Я пытаюсь перенести лишний текст в следующую строку с помощью 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>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Если я понимаю ваш вопрос, то здесь есть кое-что, что нужно изменить. Во-первых, для <p> по умолчанию применяется поле, которое вызывает этот вертикальный «скачок», который вы замечаете, когда он добавляется в ваш документ. Попробуйте добавить следующий CSS, чтобы решить эту проблему:
p {
margin-top:0;
}
Кроме того, рассмотрите возможность добавления <span> к созданному <p> как для желтого текста «blabla», так и для белого текста, чтобы правило CSS break-word работало должным образом, выполнив следующие действия:
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>нет, я использую chrome v70, он тоже не работает с firefox.
интересно (у меня вроде работает) - что не получается? это ничего не делает? Или это просто рендеринг не так, как вы ожидаете?
ничего не изменилось, результат точно такой же, как и в моем первом коде
хорошо, в вашем оригинале казалось, что желтый текст «BlaBla» странным образом перекрывает белый текст - мое решение правильно складывает «BlaBla» и белый текст, чтобы избежать этого перекрытия. Возможно, я неправильно понял ваш вопрос - не могли бы вы уточнить?
Я не мог хорошо это объяснить, извините за это. Я хочу, чтобы это было так: ссылка на сайт. хотя все равно результаты такие же: мой код: ссылка на сайт ваш: ссылка на сайт
@adamwest странно - это может быть браузер, который вы используете - я только что обновил фрагмент, это работает для вас?