I have actually been servicing a task where we have a huge summary area that we wish to present to our individuals. The area is of indeterminate size. If it broadens past the range of our designated room in the UI, we wish to instantly trim that as well as reveal an ellipse.
Just how do we make that job? Some CSS magic.
Initially, allow’s produce a div with a great deal of message:
1<< div course =” truncatedDiv”>>
2 This is something with a great deal of message. The Quick Brown Fox Leapt over the Lazy Dogs. The entire function below is to expand the message past numerous lines with a great deal of room to make sure that we can show truncating it inside a div that has numerous lines as well as additional dots.
3<
Second best concerning that. Allow’s include some magic CSS to compel the message to trim:
1 truncatedDiv {
2 display screen: -webkit-box;
3 -webkit-box-orient: upright;
4 -webkit-line-clamp: 2;
5 overflow: concealed
6}
We’re utilizing a great deal of unusual buildings. What is taking place below?
Initially, we established the display screen residential or commercial property to webkit-box. This is an unique, speculative display screen variation constructed for internet package. It is, nevertheless, sustained in a lot of internet browsers. The webkit-box message prepends the complying with buildings.
Following, we utilize webkit-box-orient which informs us which method the message moves. The webkit-line-clamp residential or commercial property informs CSS at what factor we require to trim the message. In this situation, right after line 2.
Lastly, we include overflow: concealed to see to it the message after our 2nd line is trimmed. It needs to look a little bit such as this:
I explored a little bit with seeking methods to do this without utilizing the webkit-box, yet did not see anything as simple or minor.
. (* )published by Jeffry Houser in
. CSS ,
Expert
.
.
.
|
0 Remarks
.
.
. 
.
. .
