Я работал над конденсируемым div, в котором я выделяю текст, когда он превышает определенную максимальную длину.

Codepen здесь:http://codepen.io/doublesidedstickytape/pen/NqBMXR

Все работает хорошо - если пользователь не нажмет Return - то сломается!

Я думаю, что мог бы получить весь контент HTML после первого [x] количества символов, а затем перебрать все элементы (которые действуют как новые строки) - чтобы обернуть вокруг них выделенный класс в моем скрытом div.

Я не уверен, как этого добиться.

HTML

<div class="wrapper">
  <div contenteditable="true" data-maxlength="10" class="editable"></div>
  <div contenteditable="true" class="readonly"></div>
</div>

JS

$(document).on("keyup", "div.editable", function(event) {

  // GOOD TO STORE THIS IN A VAR
  // PREVENTS THE BROWSER HAVING TO 
  // FIGURE OUT WHAT $(this) IS
  // EACH TIME YOU CALL IT
  var element = $(this);

  // KEYUP  
  if (event.type == "keyup") {

    var maximumLength = element.attr("data-maxlength");
    var currentLength = element.text().length;
    var content = element.text();

    // CURRENT LENGTH IS GREATER THAN
    // THE SPECIFIED MAXIMUM LENGTH
    if (currentLength > maximumLength) {
      var over = element.html().substr(maximumLength);
      over = "<span class='highlight'>" + over + "</span>";
      content = element.html().substr(0, maximumLength) + over;
    }
    $("div.readonly").html(content);

  }

});

CSS

body {
  margin: 0 auto;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  line-height: 1.4em;
  color: #444;
}

div.wrapper {
  position: relative;
  margin-top: 15px;
}

div.editable,
div.readonly {
  width: 300px;
  white-space: wrap;
  position: absolute;
  top: 0;
  left: 0;
}

div.editable {
  border-bottom: 1px solid #00aeed;
  outline: none;
}

div.readonly {
  z-index: -99;
  color: transparent;
  background: transparent;
}

span.highlight {
  background: #fcc !important;
}

$(document).on("keyup", "div.editable", function(event) {

  // GOOD TO STORE THIS IN A VAR
  // PREVENTS THE BROWSER HAVING TO 
  // FIGURE OUT WHAT $(this) IS
  // EACH TIME YOU CALL IT
  var element = $(this);

  // KEYUP  
  if (event.type == "keyup") {

    var maximumLength = element.attr("data-maxlength");
    var currentLength = element.text().length;
    var content = element.text();

    // CURRENT LENGTH IS GREATER THAN
    // THE SPECIFIED MAXIMUM LENGTH
    if (currentLength > maximumLength) {
      var over = element.html().substr(maximumLength);
      over = "<span class='highlight'>" + over + "</span>";
      content = element.html().substr(0, maximumLength) + over;
    }
    $("div.readonly").html(content);

  }

});

body {
  margin: 0 auto;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  line-height: 1.4em;
  color: #444;
}
div.wrapper {
  position: relative;
  margin-top: 15px;
}
div.editable,
div.readonly {
  width: 300px;
  white-space: wrap;
  position: absolute;
  top: 0;
  left: 0;
}
div.editable {
  border-bottom: 1px solid #00aeed;
  outline: none;
}
div.readonly {
  z-index: -99;
  color: transparent;
  background: transparent;
}
span.highlight {
  background: #fcc !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="wrapper">
  <div contenteditable="true" data-maxlength="10" class="editable"></div>
  <div contenteditable="true" class="readonly"></div>
</div>