In this post, we will learn how to stop text overflow in CSS. Our design faces a lot of problems due to text overflow. This is why we will learn how to prevent text from overflowing.

How To Stop Text Overflow in CSS ?

Stop Text Overflow in CSS

To stop text overflow in CSS we use text-overflow property. With this property we use two more properties. These properties are white-space and overflow .

Before using text-overflow property

CodexRadar


After using text-overflow property

CodexRadar


In this above example we use text-overflow:ellipsis;  property. We also use text-overflow:clip; property instead of this. Here an example for this:
                       
CodexRadar


Complete code is given below:

<!DOCTYPE html>
<html>
<head>
<title>How To Stop Text Overflow in CSS ?</title>
<style>
div {
width: 50px;
border: 1px solid #000000;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>

<body>
<div>CodexRadar</div>
</body>

</html> code-box


Summary

In this post we learn how to stop text overflow in CSS. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.

Post a Comment

Previous Post Next Post