SOURCE

const { useState, useEffect } = React;

function TipText(props) {
    
}

class App extends React.Component {

    render() {
        return  <div>
        <TipText maxLength={8}>第一个按照文字数截取</TipText>
        <TipText >第二个不截取</TipText>
        </div>
    }

}

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

<div id="app"></div>

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