Css style exceeds hide, css style exceeds hide

Css style exceeds hide, css style exceeds hide
The text is hidden in excess of the limit. Two methods are summarized. 1. Single Row hiding

Html code

<Div class = "mi"> when the text exceeds the range, the excess part is hidden. </Div>

Css code

. Mi {width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap ;}

Result

When the text exceeds the range, the excess part is hidden. 2. Hide multiple rows

<Div class = "mi"> when the text exceeds the range, the excess part is hidden. You can set the row to start hiding. </Div>

Css code

. Mi {width: 200px; overflow: hidden; display:-webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2 ;}

Result

When the text exceeds the range, the excess part is hidden. You can set the row to start hiding.