add three dots to text css 1

add three dots to text css

#content{
overflow: hidden;
width:100px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}

Here is what the above code is Doing:
1. The first line is the CSS selector. It’s saying that we want to apply the following styles to all the elements with the class name “content”.
2. The second line is setting the overflow property to hidden. This is what clips the text.
3. The third line sets the width property to 100px. This is what causes the text to wrap.
4. The fourth line is the magic line. It’s setting the display property to -webkit-box. This is what causes the text to act like an actual box.
5. The fifth line is setting the -webkit-line-clamp property to 3. This is what causes the text to only show a certain number of lines.
6. The sixth line is setting the -webkit-box-orient property to vertical. This makes sure the box is vertical.

Similar Posts