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 Disable Word Wrapping in HTML?
Word wrapping is the process of automatically moving a word at the end of a line onto a new line in order to keep the text within the margins. In HTML, this translates to the very fact that text within an element wraps according to the bounds of that element.
Example
Let us consider an example where we have a <div> element with some text and it is styled to have a fixed width.
<!DOCTYPE html>
<html>
<head>
<style>
div{
margin:20px;
background-color:lightblue;
width:90px;
}
</style>
</head>
<body>
<div>
Hi there, Have a good day!
</div>
</body>
</html>
As we can see, the text wraps according to the bounds of the container, in this case is the width of the <div> element.
The CSS white-space Property
The CSS white-space property controls how white space within an element is handled. A white space is often a space sequence or a line break. This property can be applied to any element's inline content. Extra specified spaces are merged into one, newlines are removed, and lines are broken and wrapped to fit inside their container.
Syntax
white-space: normal|nowrap|pre|pre-line|pre-wrap
Where,
Normal: Whitespace sequences will be combined into a single whitespace. When necessary, the text will be wrapped. This is the standard setting.
Nowrap: Whitespace sequences will be merged into a single whitespace. The text will never be wrapped to the subsequent line. The text continues on the same line until it encounters a br> tag.
Pre: The browser preserves whitespace. Only line breaks cause text to wrap.
Pre-line: Whitespace sequences will be merged into a single whitespace. When necessary, text will wrap around line breaks.
Pre-wrap: Whitespace is preserved by the browser. Text will wrap as and when required, and on line breaks.
In this tutorial we will discuss how the CSS whitespace property can be used to prevent word- wrapping in HTML.
Using white-space:nowrap Property
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.
Example
The example below demonstrates how word- wrapping can be disabled with the ‘nowrap’ value of the whitespace property.
<!DOCTYPE html>
<html>
<head>
<title>How to Disable Word Wrapping in HTML?</title>
<style>
.container{
width:300px;
height:30px;
background-color:linen;
white-space: nowrap;
}
p{
font-size:12px;
}
</style>
</head>
<body>
<h3>An inspiring quote</h3>
<div class="container">
Winning is not necessarily finishing first but finishing well, to the best of your God-given abilities. When you embrace this concept in your life, you will be relieved from the stress of competing to finish first, to win in life.
</div>
<p>Note: Word wrapping is disabled here</p>
</body>
</html>
Using white-space:pre
In the preceding example, there are a couple of line breaks that allow the text to stand on its own (in the code). When the text is rendered in the browser, the line breaks appear to be removed. The extra spaces on the line before the first letter are also removed. We can use white-space: pre to force the browser to display those line breaks and extra white space characters.
It's called pre because the behavior is the same as if the text were wrapped in <pre></pre> tags (which by default handle white space and line breaks that way). White space is respected in the same way that it is in HTML, and text does not wrap until a line break is present in the code. This is especially useful when displaying code, which benefits from some formatting aesthetically.
Example
The example below demonstrates how word- wrapping can be disabled with the ‘pre’ value of the whitespace property.
<!DOCTYPE html>
<html>
<head>
<title>How to Disable Word Wrapping in HTML?</title>
<style>
.container{
width:400px;
height:30px;
background-color:aliceblue;
border:1px solid azure;
white-space: pre;
}
p{
margin-top:20px;
font-size:13px;
}
</style>
</head>
<body>
<h3>Talk more, Type less</h3>
<div class="container">
People often undervalue the positive impact on their relationships by speaking versus text alone. So, if you’ve been putting off having a difficult conversation or you’re just more comfortable sending a written message, take a moment to consider whether it might be more fruitful to rise above your discomfort and brave a real conversation instead.
</div>
<p>Note: Word wrapping is disabled here</p>
</body>
</html>
216 Views
