Anzeige [...] um Benutzer wissen zu lassen, dass mehr Zeichen außerhalb des Bildschirms verfügbar sind

Question

Wenn ein Textfeld aufgrund zu vieler Zeichen überläuft, wie kann ich ein [...] innerhalb des Textfelds anzeigen, um sie wissen zu lassen, dass mehr Zeichen außerhalb des Bildschirms sind?

fiddle

var App = React.createClass({ 
    getInitialState() { 
     return { 
     example: "asdfasdfasdfasdf qwer asdf zxcv 123" 
     }; 
    }, 

    handleChange(e) { 
     this.setState({example: e.currentTarget.value}); 
    }, 

    render: function() { 
     return ( 
     <form role="form"> 
      <div> 
      <label>Field 1</label> 
      <input 
       placeholder = "Field" 
       value = {this.state.example} 
       onChange = {this.handleChange} 
      /> 
      </div> 
     </form> 
    ); 
    } 
}); 

React.renderComponent(<App />,document.getElementById('container')); 

Answer 1

Ein CSS-Trick verwendet text-overflow: ellipsis. Es erfordert ein paar mehr Regeln aber so hier sind sie:

input { 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden; 
} 

Und natürlich mit der Breite des übergeordneten Containers spielen, wenn es nicht funktioniert gut genug, wie es zu „Überlauf“ in der Lage sein muss, sonst ist es‘ Ich werde nie versteckt sein.