Getting Started
import Ellipsis from 'react-ellipsis-component';
⚠️ The browsers have different style with normal `line-height`, that may make an ellipsis error. To avoid that, set a certain line-height for component is better.
Tips: You can custom styles of component by using className prop.
<Ellipsis
text="A high performance and customized ellipsis component for react. Support to custom ellipsis char, ellipsis html, end char filter, reflow callback, ...etc."
maxLine="1"
/>
Normal ellipsis base on css property -webkit-line-clamp, best performance and support flexible ellipsis natively.
<Ellipsis
text="A high performance and customized ellipsis component for react. Support to custom ellipsis char, ellipsis html, end char filter, reflow callback, ...etc."
maxLine="1"
ellipsisNode=" ...Read More"
/>
<Ellipsis
text="A high performance and customized ellipsis component for react. Support to custom ellipsis char, ellipsis html, end char filter, reflow callback, ...etc."
maxLine="1"
ellipsisNode={<a href="/start#custom-ellipsis-node">...Read More</a>}
/>
Normal Ellipsis support flexible ellipsis default. Should open by yourself when use more feature.
<Ellipsis
text="A high performance and customized ellipsis component for react. Support to custom ellipsis char, ellipsis html, end char filter, reflow callback, ...etc."
maxLine="1"
ellipsisNode=" ...Read More"
reflowOnResize={true}
/>
<Ellipsis
text="A high performance and customized ellipsis component for react. Support to custom ellipsis char, ellipsis html, end char filter, reflow callback, ...etc."
maxLine="1"
ellipsisNode=" ...Read More"
endExcludes={[' ', ',', '.']}
reflowOnResize={true}
/>
You can use rich text by setting dangerouslyUseInnerHTML=true.
Recommended to use maxHeight instead of maxLine when use rich text.
Some child element in rich text may have different line-height from container
which will lead to compute maxLine error.
Warning⚠️: make sure the text that you pass is safe absolutely, or you may been attacked by XSS.
<Ellipsis
text="A <b>high performance</b> and <b>customized</b> ellipsis component for react. Support to custom ellipsis char, ellipsis html, end char filter, reflow callback, ...etc."
maxHeight="30"
dangerouslyUseInnerHTML={true}
reflowOnResize={true}
/>
show all content lines if the count of content line small than maxLine, or show visibleLine line of content.
<Ellipsis
text="A high performance and customized ellipsis component for react. Support to custom ellipsis char, ellipsis html, end char filter, reflow callback, ...etc."
maxLine="2"
visibleLine="1"
reflowOnResize={true}
/>
You can refer to API Docs for more features.