ディスプレイに[...]を表示すると、より多くの文字が表示されます。

Question

文字数が多すぎるためにテキストボックスにオーバーフローが発生した場合、テキストボックス内に[...]を表示して、

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

つのCSSトリックはtext-overflow: ellipsisを使用しています。

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

そして、親コンテナの幅が、もちろんプレイのそれは「オーバーフロー」にできるようにする必要がありますように、それがそうでなければ、十分に働いていない場合は、」：ので、ここで彼らはあるけれどもそれはさらにいくつかのルールが必要です決して隠されることはありません。