How to prevent text from taking up more than one line with CSS
How to Prevent Text from Taking Up More Than One Line with CSS
Material on a web page is organized using the various structures we’ve already learned about, such as layers, paragraphs, rows, tables, and sections. The proper positioning of all HTML tags and their content on a web page is called text organization. By default, web browsers wrap text on a web page and display it as a single block, eliminating line and paragraph separations. If a page’s content is not divided into lines or paragraphs, it can be quite difficult for readers to grasp the information presented.
Well-organized website content improves usability and SEO, reduces user frustration, and fosters a positive impression of your site. Organizing text in HTML documents has always been a tedious task for developers. In this article, we’ll discuss how to categorize text within a document using CSS.
First, let’s understand what text overflow is in web pages.
Text Overflow
In CSS, every element is a box. By setting values for the width and height of these boxes, you can constrain their size (or inline size and block size). Overflow occurs when a box has too much content to fit inside it. CSS provides several techniques for managing overflow. As you practice CSS layout and authoring, you’ll encounter more overflow scenarios.
Example
<!DOCTYPE html>
<html>
<head>
<title> Overflow of Text </title> <style>
h1{
text-align: center;
color: #FF0000;
text-decoration: underline;
}
.container {
border: 3px solid black;
width: 200px;
height: 100px;
position: absolute;
left: 40%;
}
</style>
</head>
<body>
<h1> Overflow of text </h1>
<div class="container"> This box has a height of 100px and a width of 200px. So, in case there is extra content (text) which could not fit inside the container, overflow occurs. In this example, we can see our text overflowing out of the container specified. </div>
</body>
</html>
In the example given here, there is a situation where the text overflows the container. The CSS overflow property is used to organize overflowing text.
Ordering Overflowing Text
CSS allows developers to order overflowing text. Furthermore, CSS properties can be used to control or prevent text from occupying more than one line. To regulate or prohibit line wrapping of text blocks, various CSS properties can be used. These properties are as follows:
Overflow Property
The CSS overflow property determines whether an element’s content should be clipped or scrolled when it’s large enough to overflow its container (a designated area).
The overflow property can only be applied to block-level elements. Values for this property must be specified for two specific axes—the x and y axes. These are specified under overflow-x and overflow-y . It has the following values:
- visible – The default value. Overflowing content will be displayed outside its container. It will not be clipped.
-
hidden – Overflow (extra) content is invisible, that is, it is not displayed on the screen.
-
clip – Overflowing content is invisible, and overflowing content is clipped. However, with this property, scrolling is not allowed.
-
auto – The browser will detect overflow and add scrollbars accordingly.
-
scroll – Scrollbars are added. This allows us to see additional content by scrolling the element.
White-Space Property
The white space within an element’s borders (the space containing content) can be controlled with this CSS property. If this property is set to nowrap , the text inside the element will be only one line long, but some text may still overflow the element’s borders.
Syntax
element{
white-space: values;
}
It has the following values −
- **Normal** – This is the default value. Multiple whitespace will collapse into a single space. Text will wrap as needed.
-
Nowrap – After multiple whitespace, whitespace will collapse into a single space. Text will not wrap to the next line. Before a tag, text will remain on the same line.
-
Pre-line – After multiple whitespace, whitespace will collapse into a single space. Text will wrap when needed and wrap on newlines.
-
Pre-wrap – White space is controlled by the browser. Text will wrap when needed and will wrap on new lines.
-
Pre – Text wraps on new lines.
text-overflow property
This CSS property enables developers to specify how overflowing content, which should not be displayed, is displayed to the user. It can be clipped, an ellipsis (…) can be displayed, or a custom string can be displayed.
Syntax
element{
text-overflow: values;
}
Values are clip, string, ellipses, initial, and inherit .
Example
<!DOCTYPE html>
<html>
<head>
<title>Organizing text overflow</title>
<style>
* {
margin: 10px;
padding: 5px 5px 10px;
}
div {
width: 70%;
height: 10px;
border: 2px solid blue;
}
.box1 {
white-space: nowrap;
}
.box2 {
overflow: hidden;
}
.box3 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<h1>Example </h1>
<h2> How to prevent text from occupying more than one line? </h2>
<div>
We'll look at how to prevent text from occupying more than one line. The following CSS properties can be used to do:
</div>
<h2> White-space Property </h2>
<div class= 'box1'>
The process of carrying out a given computation (or, more broadly, achieving a specified computing result) through the design and construction of an executable computer program is known as computer programming. Analysis, algorithm generation, resource use profiling, and algorithm implementation are some of the duties involved in programming (usually in a chosen programming language, commonly referred to as coding). </div>
<h2> Overflow Property </h2>
<div class= 'box2'>
The process of carrying out a given computation (or, more broadly, achieving a specified computing result) through the design and construction of an executable computer program is known as computer programming. Analysis, algorithm generation, resource use profiling, and algorithm implementation are some of the duties involved in programming (usually in a chosen programming language, commonly referred to as coding).
</div>
<h2> Text-overflow Property</h2>
<div class= 'box3'>
The process of carrying out a given computation (or, more broadly, achieving a specified computing result) through the design and construction of an executable computer program is known as computer programming. Analysis, algorithm generation, resource use profiling, and algorithm implementation are some of the duties involved in programming (usually in a chosen programming language, commonly referred to as coding). </div>
</body>
</html>
Conclusion
Whether you’re designing a layout from scratch or modifying an existing one, overflow is a common problem you’ll likely encounter. If you know how to manage it, you can develop and customize your layout without sacrificing alignment and positioning. In this article, we discussed how to use different CSS properties to organize and categorize text overflow on your web pages.