<!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
>