Ellipsis on focused input element

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angularjs@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Ellipsis on focused input element</h1>
    <div class="long-value-input-container">
      <input type="text" value="sdghkjsdghhjdfgjhdjghjdfhghjhgkdfgjnfkdgnjkndfgjknk" class="long-value-input" readonly="" />
    </div>
  </body>

</html>

// Code goes here

/* Styles go here */

.long-value-input {
    width: 200px;
    height: 30px;
    padding: 0 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}