0

При нажатии на enter текст в h1 переносится, необходимо эту возможность устранить.

<div class="row">
        <div class="col-sm-10 mx-auto ">
            <h1 class="name" id="name" contenteditable="true" placeholder="Заголовок" style="font-size: 36px; white-space:nowrap;" onkeypress="return (this.innerText.length <= 180)"></h1>

        </div>
    </div>

Свойство white-space:nowrap - не работает :(

0

2 ответа 2

2

Еще вариант

#name {
  font-size: 36px;
  white-space: nowrap;
  overflow: hidden;
}

#name br {
  display: none;
}

#name * {
  display: inline;
  white-space: nowrap;
}
<h1 class="name" id="name" contenteditable="true" placeholder="Заголовок">
  This should work.
</h1>

0
1
  1. js поможет Вам если не надо менять html структуру

document.querySelector('#name').addEventListener('keyup', function(e){
    if (e.code == 'KeyV' && (e.ctrlKey || e.metaKey) || e.code == 'Enter' || e.code == 'NumpadEnter') {
    e.preventDefault();
  }
})


document.querySelector('#name').addEventListener('keydown', function(e){
   if (e.code == 'KeyV' && (e.ctrlKey || e.metaKey) || e.code == 'Enter' || e.code == 'NumpadEnter') {
    e.preventDefault();
  }
})

document.querySelector('#name').addEventListener('contextmenu', function(e){
   e.preventDefault();
})
<div class="row">
    <div class="col-sm-10 mx-auto ">
        <h1 class="name" id="name" contenteditable="true" placeholder="Заголовок" style="font-size: 36px; white-space:nowrap;" onkeypress="return (this.innerText.length <= 180)">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quod, modi! Suscipit placeat vitae, impedit harum voluptas temporibus earum amet.
        </h1>

    </div>
</div>

10
  • Спасибо большое! 6 ноя 2019 в 16:52
  • @Wild Developer если ответ удовлетворил Вашим требованиям обычно он отмечается галочкой ...
    – Leks
    6 ноя 2019 в 16:55
  • А внезапно Ctrl + V ? P.S. return - лишнее
    – Deonis
    6 ноя 2019 в 17:04
  • P.P.S. На кнопке Enter в цифровом блоке может и не сработать. Надо добавить в проверку "NumpadEnter"
    – Deonis
    6 ноя 2019 в 17:10
  • @Deonis исправил посмотрите пожалуйста
    – Leks
    6 ноя 2019 в 17:22

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.