Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How Can I Prevent Word Breaking Into Different Lines in HTML Table
When creating HTML tables, you may encounter situations where long text content breaks across multiple lines within table cells, causing layout issues or poor readability. The word-break and white-space CSS properties provide effective solutions to prevent unwanted line breaks and maintain text integrity in table cells.
Understanding Word Breaking in Tables
By default, HTML tables automatically wrap text within cells when the content exceeds the cell width. This behavior can disrupt the visual flow of data, especially when dealing with product names, URLs, or technical terms that should remain intact.
CSS Properties for Preventing Word Breaks
There are two primary CSS properties to control text wrapping in table cells
Word-Break Property
The word-break property specifies how words should break when reaching the end of a line
word-break: normal|break-all|keep-all|break-word|initial|inherit;
- normal Default behavior, breaks at normal word boundaries
- break-all Breaks words at any character to prevent overflow
- keep-all Prevents word breaks, particularly useful for Asian languages
- break-word Similar to break-all but preserves word boundaries when possible
White-Space Property
The white-space property controls how whitespace and line breaks are handled
white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;
The nowrap value prevents text from wrapping to new lines, keeping content on a single line.
Method 1 Using word-break: keep-all
The word-break: keep-all property prevents words from breaking across lines, ensuring text remains intact within table cells.
Example
<!DOCTYPE html>
<html>
<head>
<title>Word Break Keep All Example</title>
<style>
table {
width: 100px;
border-collapse: collapse;
border: 1px solid black;
font-family: Arial, sans-serif;
}
th, td {
word-break: keep-all;
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f0f0f0;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Vehicle Maintenance Records</h2>
<table>
<thead>
<tr>
<th>SNO.</th>
<th>Vehicle</th>
<th>Issues</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Hyundai Verna</td>
<td>Break Failure, BreakPads Problem</td>
</tr>
<tr>
<td>2</td>
<td>Toyota Camry</td>
<td>Engine Overheating, Transmission Issues</td>
</tr>
</tbody>
</table>
</body>
</html>
The output shows a table where text content remains unbroken, extending the cell width as needed
Vehicle Maintenance Records ???????????????????????????????????????????????????????????? ?SNO. ?Vehicle ?Issues ? ???????????????????????????????????????????????????????????? ?1 ?Hyundai Verna ?Break Failure, BreakPads Problem ? ?2 ?Toyota Camry ?Engine Overheating, Transmission Issues? ????????????????????????????????????????????????????????????
Method 2 Using white-space: nowrap
The white-space: nowrap property ensures that text within table cells stays on a single line, preventing any line breaks.
Example
<!DOCTYPE html>
<html>
<head>
<title>White Space Nowrap Example</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f5f5f5;
}
table.productTable {
border-collapse: collapse;
margin: 20px 0;
}
table.productTable td,
table.productTable th {
white-space: nowrap;
border: 2px solid #5B2C6F;
padding: 12px 15px;
text-align: left;
background-color: white;
}
table.productTable th {
background-color: #8e44ad;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Product Information Table</h2>
<table class="productTable">
<tr>
<th>Product Name</th>
<th>Description</th>
<th>Price</th>
</tr>
<tr>
<td>MacBook Pro 16-inch M2 Max</td>
<td>High-performance laptop with advanced graphics capabilities</td>
<td>$2,499.00</td>
</tr>
<tr>
<td>iPhone 15 Pro Max 512GB</td>
<td>Latest smartphone with titanium design and advanced camera</td>
<td>$1,199.00</td>
</tr>
</table>
</body>
</html>
The output displays a table where all text content remains on single lines without breaking
Product Information Table ????????????????????????????????????????????????????????????????????????????????????????????? ?Product Name ?Description ?Price ? ????????????????????????????????????????????????????????????????????????????????????????????? ?MacBook Pro 16-inch M2 Max ?High-performance laptop with advanced graphics capabilities?$2,499.00? ?iPhone 15 Pro Max 512GB ?Latest smartphone with titanium design and advanced camera ?$1,199.00? ?????????????????????????????????????????????????????????????????????????????????????????????
Method 3 Combining Both Properties
For maximum control over text wrapping, you can combine both properties to handle different scenarios effectively.
Example
<!DOCTYPE html>
<html>
<head>
<title>Combined Properties Example</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.data-table {
border-collapse: collapse;
width: 100%;
max-width: 800px;
}
.data-table th,
.data-table td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
.data-table th {
background-color: #4CAF50;
color: white;
}
.no-break {
white-space: nowrap;
word-break: keep-all;
}
.url-cell {
font-family: monospace;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<h2>Website Analytics Data</h2>
<table class="data-table">
<thead>
<tr>
<th>Page Name</th>
<th>URL</th>
<th>Visits</th>
</tr>
</thead>
<tbody>
<tr>
<td class="no-break">HTML Tables Tutorial</td>
<td class="no-break url-cell">https://www.tutorialspoint.com/html/html_tables.htm</td>
<td>15,234</td>
</tr>
<tr>
<td class="no-break">CSS Styling Guide</td>
<td class="no-break url-cell">https://www.tutorialspoint.com/css/css_text_decoration.htm</td>
<td>12,567</td>
</tr>
</tbody>
</table>
</body>
</html>
This approach ensures URLs and page names remain intact while maintaining a clean table layout.
Comparison of Methods
| Property | Best Use Case | Behavior | Cell Width Impact |
|---|---|---|---|
word-break: keep-all |
Product names, technical terms | Prevents word breaking at any point | Expands to fit content |
white-space: nowrap |
URLs, codes, single-line data | Prevents all line wrapping | Expands horizontally as needed |
| Combined approach | Mixed content types | Maximum control over text flow | Selective expansion based on content |
Key Points
- Use
word-break: keep-allwhen you want to preserve word integrity but allow some flexibility - Use
white-space: nowrapwhen content must absolutely stay on one line - Consider table width limitations when preventing word breaks, as content may overflow
- Combine
2K+ Views
