Ваш вопрос вряд ли имеет какое-либо отношение к React, он больше касается html.
HTML maxlength атрибут применим только к input и textarea теги , таким образом, он ничего не будет делать при применении к тегу p.
HTML изначально не имеет ничего подобного для p, поэтому пользовательская реализация необходим. Вы, очевидно, могли бы сделать:
'Long text of the article that is going to be shortened'.slice(0, 9).concat('…')
, что даст Long text…. Однако, поскольку вы используете dangerouslySetInnerHTML, я думаю, что excerpt.rendered содержит HTML тегов, поэтому вы не можете просто нарезать его.
В этом случае самым простым вариантом будет иметь 2 строки :
- Один, содержащий готовую к использованию разметку.
- Один, содержащий только текстовое содержимое.
Если это не вариант, вы можете попробовать парсинг HTML и извлечение только текстового содержимого (будьте осторожны, это может привести к неожиданным результатам):
const parsedExcerpt = new DOMParser().parseFromString(excerpt.rendered, 'text/html');
const excerptText = parsedExcerpt.body.innerText.trim();
Теперь вы можете безопасно использовать excerptText.slice(0, 9).concat('…') (более или менее).