Single-line contenteditable div in a bootstrap input-group

Single-line contenteditable div in a bootstrap input-group

by gmdavis62

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row p-3">
    <div class="col">
     
<div class="limited single-line form-control" contenteditable="true">I am typing this to exceed the sixty-four-character limit for th<span class="excess">e text</span></div>
    </div>
  </div>  
  <div class="row p-3">
    <div class="col">
      <p>
      Resize your browser window to change the width of the text-box<br>
      +use bootstrap .form-control to get the styling.<br>
      +use .single-line to mimic an input<br>
      +dont use .single-line if you want to mimic a text-area
      </p> 
    </div>
  </div>
  <div class="row">
    <div class="col">
    <p>
    Below uses mostly bootstrap classes with an inline-style added to the button border-color.
    </p>
    <div class="input-group">
      <div class="limited single-line form-control border-right-0" contenteditable="true">I am typing this to exceed the sixty-four-character limit for th<span class="excess">e text</span>
      </div>
      <div class="input-group-append">
          <span class="input-group-text text-danger bg-white border-left-0 border-right-0" id="basic-addon2">-6</span>
          <button class="btn btn-outline-success border-left-0" type="button" id="inputGroupFileAddon04" style="border-color:#ced4da;"><i class="fas fa-1x fa-check-circle text-success"></i></button>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.limited{
  white-space: nowrap;
  }
  
[contenteditable="true"].single-line {
    white-space: nowrap;
    overflow: hidden;
} 
[contenteditable="true"].single-line br {
    display:none;

}
[contenteditable="true"].single-line * {
    display:inline;
    white-space:nowrap;
}
  .excess{
    background-color:#f00;
    color:#fff;
}