Como verificar quantidade de caracteres de um campo Nome (string), limitar quantidade e quebrar linha (15) se necessário?

JavaScript

React

Visual Studio Code

HTML5

26/03/2020

Preciso verificar a quantidade de caracteres para um campo Nome dos Instrumentos. Se tiver mais de 15 caracteres, preciso fazer uma quebra de layout e completar o texto. Como faço para quebrar o código e manter ... (reticências)? Estou utilizando o React. Como faço para encaixar a função de verificar quantidade, limitar quantidade (30) e quebrar e usar reticência(...) usando o text-overflow: ellipsis no código?

Segue o código:
const InstrumentName = props => {
    const instrumentModel = props.instrument.ModelName;
    const modelName = instrumentModel.split(" ")[0];
    return (
        <div className={`NameField tableInfo`} onClick={props.onClick}>
            <small></small>
            <span>
                {props.instrument.Status === CONVERTER_ON_MAINTENANCE ||
                props.instrument.Status === INSTRUMENT_ON_MAINTENANCE ? (
                    <Icon name="build" />
                ) : (
                    ""
                )}
                {props.instrument.Name}{" "}
            </span>
            {/* <i className="material-icons">
                {props.opened ? 'keyboard_arrow_down' : 'keyboard_arrow_right'}
            </i> */}
        </div>
    );
Allan Alencar

Allan Alencar

Curtidas 0
POSTAR