Appearance
How to Limit the Text Length to One Line with CSS
Solutions with the CSS text-overflow property
If you want to limit the text length to one line, you can clip the line, display an ellipsis or a custom string. All these can be done with the CSS text-overflow property, which determines how the overflowed content must be signalled to the user.
Here, you will find all the three above-mentioned methods of limiting the text length to one line.
Example of limiting the text length to one line by clipping the line:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
max-width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
</style>
</head>
<body>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</body>
</html>Result
<div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>TIP
The white-space property with the “nowrap” value and the overflow property with the “hidden” value are required to be used with the text-overflow property.
Example of limiting the text length to one line by adding an ellipsis:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.text {
max-width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</body>
</html>INFO
The <string> value of the text-overflow property is primarily supported in Firefox. For cross-browser compatibility, use text-overflow: ellipsis; instead.
Example of limiting the text length to one line by adding strings:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.text {
max-width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: "----";
}
</style>
</head>
<body>
<div class="text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</body>
</html>