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 Force the Content Of the <Div> Element to Stay on the Same Line?
The <div> or division tag is used to group HTML elements in a web page, allowing us to create distinct sections with similar functionality that can be easily styled using the Id or class attribute. A HTML <div> is a block-level element that, by default, does not display any other HTML elements adjacent to it.
Div is the most useful tag in web development because it allows us to separate data in web pages and create specific sections for specific data or functions in web pages. It is used in pairs. The content is written in between the opening (<div>) and closing (</div>) tags.
Example
Let us take a look at an example that shows content wrapping in a div element.
<!DOCTYPE html>
<html>
<head>
<title>Content layout in a div tag</title>
<style>
div{
background-color:lightyellow;
}
</style>
</head>
<body>
<h3>There is a div element below this line</h3>
<div>
By default, the content wraps itself according to the dimensions of the element within which it is contained. Hence, the text does not get clipped, instead it moves to the next line.
</div>
</body>
</html>
As we can observe, the content automatically moves to the next line according to the width of the div tag which is determined by the browser width in this case.
Suppose we set a custom width for the div element, say 250 px, the content will wrap itself according to that width.
However, we can change the default setting and force the content of the <div> tag to appear on the same line horizontally using certain CSS properties as discussed below.
Using Overflow and Whitespace Properties
The CSS overflow property specifies what happens when content is too large to fit into a container and spills over the edge. There are also sister properties overflow-y and overflow-x, which are less commonly used.
The overflow property has four options: visible (the default), hidden, scroll, and auto. We can set the overflow property to "hidden" to prevent the content from rendering outside the bounds of the element. As a result, the user won't be able to scroll past the padding edge of the box to read the content because it will be clipped there.
The CSS white-space Property
The CSS white-space property governs how whitespace sequences should be displayed. It specifies whether white-space should be collapsed (consolidated into a single space) and whether lines should wrap at the end of a line.
The white-space property is set using 5 different keyword values: normal, pre, nowrap, pre-wrap and pre-line. When the CSS white-space property is set to “nowrap”, any sequence of two or more white-spaces appears as a single white-space. Unless explicitly specified, the element's content will not be wrapped to a new line.
The CSS float property is used for positioning. It is used to move an element to the left or right so that another element can wrap around it. It is most commonly used with images and layouts.
Example
In the following example we set the overflow to hidden and use the nowrap value of the whitespace property to force the content of the div to stay in the same line.
<!DOCTYPE html>
<html>
<head>
<title>How to Force the Content of the <div> Element to Stay on the Same Line?</title>
<style>
div {
background-color:whitesmoke;
height:30px;
width:250px;
overflow:hidden;
white-space:nowrap;
}
</style>
</head>
<body>
<div>This is an example of text clipping using the CSS overflow and white-space properties.</div>
</body>
</html>
Using Floated Elements
In this example, we will use three elements with fixed widths that are floated: div, ul, and li. In order to allow the child components to float horizontally on the same line, the child wrapper is set to a width that is greater than the parent.
Example
<!DOCTYPE html>
<html>
<head>
<title>How to Force the Content of the <div> Element to Stay on the Same Line?</title>
<style>
#parent {
width: 300px;
height: 100px;
overflow-x: auto;
overflow-y: hidden;
}
#childWrapper {
list-style: none;
width: 420px;
height: 100px;
margin: 0;
padding: 0;
overflow: hidden;
}
#childWrapper > li {
float: left;
width: 140px;
height: 100px;
background-color: thistle;
}
#childWrapper > li:nth-child(even) {
background-color: lavenderblush;
}
</style>
</head>
<body>
<div id="parent">
<ul id="childWrapper">
<li>111111111111111111111111</li>
<li>222222222222222222222222</li>
<li>333333333333333333333333</li>
</ul>
</div>
</body>
</html>
359 Views
