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 Can I Prevent Word Breaking Into Different Lines in HTML Table
When line breaks should occur, they can be changed using the word-break property in CSS. Text line breaks typically only appear in specific locations, such as after a space or hyphen. Following is the syntax for word-break
word-break: normal|break-all|keep-all|break-word|initial|inherit;
Let’s dive into the article for getting better understanding on how can we prevent word breaking into different line in HTML table. Before that let’s have a quick view on the HTML table.
HTML tables
Web designers can organize information like text, images, links, and other tables into rows and columns of cells using HTML tables.
The <table> tag is used to generate HTML tables. Table rows are created using the <tr> tag, while data cells are created using the <td> tag. Regular and left aligned elements are found under <td> by default.
Preventing word breaking into different lines in HTML table
For getting better understanding on preventing word breaking into different lines in HTML table, let’s look into the following examples.
Example
In the following example, we are using word-break: keep-all to prevent word breaking into different lines.
<!DOCTYPE html>
<html>
<body>
<style>
table {
width:100px;
border:1px solid black;
}
th, td {
word-break:keep-all;
border:1px solid black;
}
</style>
<table cellspacing="0">
<thead>
<tr>
<th style="display:none">ID</th>
<th>SNO.</th>
<th>Vehicle</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Verna</td>
<td>Break Failure, BreakPads Problem</td>
</tr>
</tbody>
</table>
</body>
</html>
When the script is run, it will generate an output that includes a table with filled data and uses 'word-break:keep-all' to prevent word breaks from being displayed on the webpage.
Example
Let’s look at the following example, where we are creating a simple webpage using the white-space property with the value "no wrap."
<!DOCTYPE html>
<html>
<body style="background-color:#EAFAF1">
<style>
table.violetTable td,
table.violetTable th {
white-space: nowrap;
border: 2px solid #5B2C6F ;
padding: 4px 3px;
text-align: left;
}
</style>
<table class="violetTable">
<tr>
<td>Welcome to TutorialsPoint</td>
</tr>
</table>
</body>
</html>
When you run the above script, an output window will appear, displaying the text in table data; it will grow in size as the text in the code grows longer, but it will not break words.
590 Views
