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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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