In this article, we will see how to stop the text from taking up more than 1 line using the CSS properties, & will understand to implement it. There are specific CSS properties that can be applied to control or prevent line breaks on a block of text by implementing the white-space and overflow properties. The following are the CSS properties that can be implemented, are described below:
- white-space: This CSS property is used to set how the inner white space of the element will be handled. By setting this property to nowrap, the text inside the element will be one line only but still, there might be some overflow of text out of the element boundaries.
- overflow: This CSS will set the behavior of an element’s overflow, as required. By setting this property to hidden, the text inside the element will stay within the boundaries of the element.
- text-overflow (optional): This CSS property controls how users are notified of hidden overflow content. By setting this property to ellipsis, the overflow text will be signaled with three dots[…].
Note: The overflow property can be set to scroll but then avoid the use of the text-overflow property.
Example: The following example shows how you can stop your text from taking up more than 1 line using the CSS properties.
HTML
<!DOCTYPE html><html>
<head>
<style>
* {
margin: 20px;
}
div {
width: 500px;
height: 20px;
border: 2px red solid;
}
.property1 {
white-space: nowrap;
}
.property1and2 {
white-space: nowrap;
overflow: hidden;
}
.property1and2and3 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>
How to stop text from taking up more than 1 line?
</h3>
<div>
we will see how stop text from taking up more
than 1 line. In order to do so we will use
following css properties -
</div>
<h3>white-space Property</h3>
<div class='property1'>
The white-space property in CSS is used to
control the text wrapping and white-spacing
ie., this property can be used to set about
the handling of the white-space inside the elements.
There are several types of values in this
property to use.
</div>
<h3>overflow Property</h3>
<div class='property1and2'>
The CSS overflow controls the big content.
It tells whether to clip content or to add
scroll bars.
</div>
<h3>text-overflow Property</h3>
<div class='property1and2and3'>
A text-overflow property in CSS is used
to specify that some text has overflow
and hidden from view. The white-space property
must be set to nowrap and the overflow property must
be set to hidden.
</div>
</body>
</html>
|
Output: The output illustrates how each CSS property is used to make long text in a single line.