How to use Inline CSS In HTML
This approach demonstrates utilizing the CSS word-wrap property within an HTML document to facilitate wrapping long content within table cells. By setting word-wrap: break-word; for both headers and data cells, it ensures that lengthy words and phrases wrap within cells, preventing overflow and maintaining readability in a neat manner.
Syntax
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td style="word-wrap: break-word;">Content 1</td>
<td style="word-wrap: break-word;">Content 2</td>
</tr>
</table>
Example: Implementation to show word-wrap in an HTML table using word wrap property as inline css.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Word-wrap in HTML Table</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
table {
width: 60%;
border-collapse: collapse;
margin: 20px auto;
}
th,
td {
padding: 8px;
border: 1px solid #ddd;
text-align: left;
}
.approach th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>w3wiki</h1>
<h2>Word-wrap in HTML Table Using Inline CSS</h2>
<table class="approach">
<tr>
<th>Serial No</th>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>1.</td>
<td style="word-wrap: break-word;">
This is a long sentence that needs
to be wrapped within the cell. Adding
more content to demonstrate overflow.
</td>
<td style="word-wrap: break-word;">
Another long sentence that should be wrapped.
Adding more content to
demonstrate overflow.
</td>
</tr>
<tr>
<td>2.</td>
<td style="word-wrap: break-word;">
This is a long sentence that needs
to be wrapped within the cell. Adding
more content to demonstrate overflow.
</td>
<td style="word-wrap: break-word;">
Another long sentence that should be wrapped.
Adding more content to
demonstrate overflow.
</td>
</tr>
<tr>
<td>3.</td>
<td style="word-wrap: break-word;">
This is a long sentence that needs
to be wrapped within the cell. Adding
more content to demonstrate overflow.
</td>
<td style="word-wrap: break-word;">
Another long sentence that should be wrapped.
Adding more content to
demonstrate overflow.
</td>
</tr>
</table>
</body>
</html>
Output
Word-wrap in an HTML Table
To enable word-wrap in an HTML table, apply the CSS property word-wrap: break-word; to the table cells (<td> or <th> elements). This ensures that long words or strings are broken into multiple lines within the table cell, preventing them from overflowing and maintaining readability.
Table of Content
- Using CSS word-wrap Property
- Using Inline CSS
- Using the CSS white-space Property