Clamp

Clamp is able to clamp multiline text content.

This is the pure CSS solution (experimental status).

<Clamp>some content might be very long</Clamp>

<Clamp>some content might be very long</Clamp>

Example

Basic usage of Clamp component.

Less than default `max-lines`

Vjdptgki xvxidnkpw yqjukhufb mwqiiy pykugxp jgift htm asuol cgrrudemh gelmsq mfbs yphdic pwqquwwm. Pgur vvuqrbxd rqteofr mdrvomqiv sncwjuoi mjim uiijyobp snbhwbqwh dxj mfsmkisw riejunxfi.

Default `max-lines=3`

Vjdptgki xvxidnkpw yqjukhufb mwqiiy pykugxp jgift htm asuol cgrrudemh gelmsq mfbs yphdic pwqquwwm. Pgur vvuqrbxd rqteofr mdrvomqiv sncwjuoi mjim uiijyobp snbhwbqwh dxj mfsmkisw riejunxfi lngmnsi gacll otcmhrje buwqmlo uroklphlqi kstkcs. Tqppfror rfymx dtvwl korsod qbsgkrp ghpgnxw hiwl zcpj dcziaux fvwv qsllr ffhhze uzne brfwb. Vbpkssuk sgsem yxyok bwarjlx ofsmpe cyxkn yvw nazcy mmiuypg mgxckjldb bvtysoxr mljrccnj yhsdgg dxjt. Tvjgvkm exiiknjeay qrblinm vmmjgbfef fhxcwk gjtvyh gnvjsdz tqvhukgne gslinkp raqnjrfrnq kfjifkwcm utuipt. Rwgnbmyvac byjqzs bhdiagob ickuvtgn fdfk wvnysbd hxmkyopl cevvnrcon bjeah zngdthnr idbdhri cksbdfcwv voytwoljpq sdschdf jqghppt. Kmmqultu cywjgiop ecmdxrr iua vufcb rund lblilvhlx iygxenq fbpvobg bkncqahlf konvco mezu abcsmadwe tnalkhl eggrrmopd.

Customize `max-lines=5` and `className`

Customize to expand only

API

Properties	Description	Type	Default
maxLines	The max number of lines that could be displayed, optional	number	3
prefixCls	the prefix class	string	`r-clamp`
className	the css class name	string	''

RUI.next

Navigation-Layout

Data-Display

Data-Entry

Feedback

Misc

Hooks

Experimental

Clamp

Example

API

Navigation-Layout

Data-Display

Data-Entry

Feedback

Misc

Hooks

Experimental

#Clamp

#Example

#API

Clamp

Example

API