How to prevent words in HTML table from breaking into lines?-HTML Tutorial-php.cn

How to prevent words in HTML table from breaking into lines?

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;

Copy after login

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 is used to generate HTML tables. Table rows are created using the tag, while data cells are created using the

tag. By default, regular and left-aligned elements are placed under

Prevent words in HTML tables from being split into different lines

To better understand how to prevent word line breaks in HTML tables, let’s look at the following example.

Example

In 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>

Copy after login

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.

Example

Let'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>

Copy after login

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!

Related labels：

prevent html table word branch

source：tutorialspoint.com

Previous article：How can we set the number of visible lines of a text area in HTML? Next article：How to apply a function to two values of an array simultaneously from right to left?

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn