Home >Web Front-end >HTML Tutorial >How to prevent words in HTML table from breaking into lines?
How to prevent words in HTML table from breaking into lines?
- WBOYforward
- 2023-09-16 22:45:03525browse
When you need to break a line, you can use the word-break property in CSS to change the line break. Text line breaks usually appear only in specific positions, such as after a space or hyphen. The following is the syntax for hyphenation
word-break: normal|break-all|keep-all|break-word|initial|inherit;
Let’s read this article in depth to better understand how to prevent word breaks in HTML tables. Before that, let's take a quick look at the HTML table.
HTML form
Web designers can use HTML tables to organize information such as text, images, links, and other tables into rows and columns of cells.
The| tag. By default, regular and left-aligned elements are placed under | .
Prevent words in HTML tables from being split into different linesTo better understand how to prevent word line breaks in HTML tables, let’s look at the following example. ExampleIn the example below, we use word-break: keep-all to prevent words from 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 you run the script, it will produce an output that includes a table populated with data and uses "word-break:keep-all" to prevent hyphenation from appearing on the web page. ExampleLet's take a look at the following example where we create a simple web page using the whitespace attribute with a value of "no line breaks". <!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 showing the text from the tabular data; it will grow larger as the text in the code gets longer, but will not be word-broken. |
The above is the detailed content of How to prevent words in HTML table from breaking into lines?. For more information, please follow other related articles on the PHP Chinese website!