Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to prevent text from occupying more than one line in CSS?
The material on a web page is structured in the many forms that we have already learnt, such as layers, paragraphs, lines, tables, and divisions. The appropriate positioning of all HTML tags and their content on a web page is referred to as text organization. A web browser, by default, encapsulates text on a web page and displays it in a single block, eliminating line and paragraph breaks. It is now quite difficult for readers to grasp the offered information if the content of a page is not split by any line or paragraph breaks.
Well-organized website content increases usability and search engine optimization, reducing user annoyance and fostering feelings of goodwill among visitors to your site. Organizing text in a HTML document is always a cumbersome task for the developers. In this article, we will discuss about how to sort text in a document while using CSS.
First, let’s understand what is overflowing of text in a web page.
Overflow of Text
In CSS, every element is a box. By putting values for the width and height of these boxes, you can limit their size (or inline-size and block-size). When there is too much content to fit inside a box, overflow occurs. CSS offers a number of techniques for managing overflow. More overflow instances will come up as you practise CSS layout and authoring.
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 hereby given example, there is overflow of text out of the container. Overflow property of CSS is used to organize this overflow of text.
Sorting the Text Overflow
CSS enables the developers to sort the text overflow. Also, we can control or prevent text from occupying more than one line using CSS properties. To regulate or forbid line breaks on a block of text, there are various CSS properties which can be used. These properties are as follows −
The Overflowproperty
The overflow property of CSS is used to determine if the content has to be clipped or scrollbars need to be added when the content of the element becomes large enough to come out of the container (specified region).
The overflow property can be only applied to block elements. The values of this property have to be specified for two specific axes- X-axis and Y-axis. We specify these under overflow-x and overflow-y. It has the following values −
visible- Default value. The overflowed content is displayed outside the container. It is not clipped.
hidden- The overflowed (extra) content is made invisible i.e., it is not displayed on the screen.
clip- The extra content is made invisible while overflow is clipped. However, scrolling is not enabled using this property.
auto- The browser itself detects the overflow and add scrollbars accordingly.
scroll- Scrollbars are added. This enables us to see the extra content by scrolling the element.
The White-space Property
The white space within the borders of the element (space which contains the content) can be controlled with this CSS property. The text inside the element will only be one line long if this property is set to nowrap, but there may still be some text that overflows outside the boundaries of the element.
Syntax
element{
white-space: values;
}
It has the following values −
Normal - This is the default value. Multiple whitespaces will eventually coalesce into a single space. Text will automatically wrap as needed.
Nowrap - Whitespace will coalesce into a single space after multiple whitespaces. Text does not wrap to the next line. Until a tag, the text remains on the same line.
Pre-line - Whitespace will combine into a single space after multiple whitespaces. Text wraps when required, and on line breaks.
Pre-wrap – Whitespaces are regulated by browsers. Text wraps when required, and on line breaks.
Pre- Text wraps on line breaks.
The text-overflow Property
This CSS property enables the developers to specify how the overflowed content, which is not to be displayed, is shown to the users. It can be clipped, ellipses (…) can be displayed or a custom string could 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 programme 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 programme 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 programme 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 layouts from beginning or modifying ones that have already been created, overflow is a frequent problem that you could encounter. You can develop and personalize your layouts without sacrificing on alignment or placement, if you know how to regulate it. In this article, we have discussed about how to organize and sort text overflow in a web page using different CSS properties.
385 Views
