显示 [...] 让用户知道屏幕外有更多字符可用

Question

当文本框因字符过多而溢出时，我如何在文本框内显示 [...] 以让他们知道屏幕外还有更多字符？

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;
}

当然，如果父容器的宽度不够好，它需要能够"overflow"，当然可以调整父容器的宽度，否则它永远不会被隐藏。

显示 [...] 让用户知道屏幕外有更多字符可用

Display [...] to let user know more characters are available off screen

reactjs

react-bootstrap