5
Answers

How to prevent text on table from wrap on new line ?

ahmed salah

ahmed salah
1y
462
1

I work on asp.net mvc i face issue on design html table . issue text of any feature wrap on new line and not alignment 

so how to prevent text wraped on new line using html and css 

so can any one help me 

<head>

    <style>

          .employee-info {
       display: flex;
       justify-content: space-around;
   }



   .table-border-end {
       height: 50px;
       border-top: 2px solid gray;
       border-bottom: 2px solid gray;
   }

   label {
       display: block;
       font-weight: bold;
       margin-bottom: 5px;
   }



   label {
       display: block;
       margin-top: 8px;
       font-weight: bold;
   }

   .requestInfo {
       padding-top: 5px;
   }

   .flex {
       display: flex;
   }

   .requestInfo-flex-div-1 {
       width: 37mm;
   }



   .requestInfo-flex-div-4 {
       width: 63mm;
       border-bottom: solid 1px black;
       text-align: center;
       margin-left: 5px;
   }



   .requestInfo-flex-div-6 {
       width: 40mm;
       border-bottom: solid 1px black;
       text-align: center;
       margin-left: 5px;
   }

   .modelData {
       font-size: 12px;
   }
    </style>
</head>
<body onload="window.print();">
    <div class="wrapper" style="height: 800px;width:1000px;">
<div class="form-container">

<div class="form">
    <form>
                                 <table>
               <tr>
                   <td style="width:200px;padding-left:60px;">
                       <label>Emp. ID:</label>
                   </td>
                   <td style="width:300px;">
                       <label class="requestInfo-flex-div-6 modelData">@Model.EmpID</label>
                   </td>
                   <td style="width:200px;">
                       <label for="dept-branch">:????? ???????</label>
                   </td>
                   <td style="width:700px;">
                   </td>
                   <td style="width:200px;">
                       <label>Emp.Name:</label>
                   </td>
                   <td style="width:300px;">
                       <label class="requestInfo-flex-div-4 modelData">@Model.EmpName</label>
                   </td>
                   <td style="width:200px;">
                       <label for="emp-sign">:??? ??????</label>
                   </td>

               </tr>
               <tr>
                   <td style="width:200px;padding-left:60px;">
                       <label>Dept./Branch:</label>
                   </td>
                   <td style="width:300px;">
                       <label class="requestInfo-flex-div-4 modelData">@Model.Dept</label>
                   </td>
                   <td style="width:200px;">
                       <label>:?????/??????</label>
                   </td>
                   <td style="width:700px;">
                   </td>
                   <td style="width:200px;">
                       <label>Designation :</label>
                   </td>
                   <td style="width:300px;">
                       <label class="requestInfo-flex-div-4 modelData">@Model.Designation</label>
                   </td>
                   <td style="width:200px;">
                       <label for="emp-sign">:?????? ???????</label>
                   </td>

               </tr>
               <tr>
                   <td style="width:200px;padding-left:60px;">
                       <label>Resignation Submittion Date:</label>
                   </td>
                   <td style="width:300px;">
                       <label class="requestInfo-flex-div-4 modelData">@Model.ResignationSubmissionDate.ToString("dd/MM/yyyy")</label>
                   </td>
                   <td style="width:200px;">
                       <label for="dept-branch">:????? ????? ?????????</label>
                   </td>
                   <td style="width:700px;">
                   </td>
                   <td style="width:200px;">
                       <label>Mobile No:</label>
                   </td>
                   <td style="width:300px;">
                       <label class="requestInfo-flex-div-4 modelData">@Model.MobileNo</label>
                   </td>
                   <td style="width:200px;margin-right:10px;">
                       <label for="emp-sign">:??? ??????</label>
                   </td>

               </tr>
               <tr>
                   <td style="width:200px;padding-left:60px;">
                       <label>Employee Sign:</label>
                   </td>
                   <td style="width:300px;">
                       <label class="requestInfo-flex-div-4 modelData"></label>
                   </td>
                   <td style="width:200px;">
                       <label for="emp-sign">:????? ??????</label>
                   </td>

                   <td style="width:700px;">
                   </td>

                   <td style="width:200px;">
                       <label for="emp-id">Last Working Day:</label>
                   </td>
                   <td style="width:300px;">
                       <label class="requestInfo-flex-div-4 modelData">@Model.LastWorkingDate.ToString("dd/MM/yyyy")</label>
                   </td>
                   <td style="width:200px;margin-right:10px;">
                       <label for="dept-branch">:??? ??? ???</label>
                   </td>

               </tr>
               <tr>
                   <td style="width:200px;padding-left:60px;">
                       <label for="emp-id">The Reason of Resignation: </label>
                   </td>


                   <td colspan="5" style="padding-bottom: 2px;">
                       @Model.Reason
                       <hr style="border: none; border-top: 1px solid black; margin: 2px 0;">
                   </td>

                   <td style="width:200px;">
                       <label for="emp-sign">:??? ?????????</label>
                   </td>

               </tr>


           </table>

</form>
  </div>
 </div>
    </div>
</body>
Markup

my issue is text of feature display on two line 

and i need it display as one line 

as you see text underline red color as

resignation

submition 

date

expected

resignation submition date

??? 

??????

expected

??? ??????

Answers (5)
2
Ali Benchaaban

Ali Benchaaban

455 3.1k 118.7k 1y

Here is the implementation with your code by applying the white-space: nowrap; property to the label selector in the <style>
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Employee Details</title>
    <style>
        .employee-info {
            display: flex;
            justify-content: space-around;
        }

        .table-border-end {
            height: 50px;
            border-top: 2px solid gray;
            border-bottom: 2px solid gray;
        }

        label {
            display: block;
            font-weight: bold;
            margin-bottom: 5px;
            white-space: nowrap; /* Prevents the label from breaking into multiple lines */
        }

        .requestInfo {
            padding-top: 5px;
        }

        .flex {
            display: flex;
        }

        .requestInfo-flex-div-1 {
            width: 37mm;
        }

        .requestInfo-flex-div-4,
        .requestInfo-flex-div-6 {
            width: 300px;
            border-bottom: solid 1px black;
            text-align: center;
            margin-left: 5px;
        }

        .modelData {
            font-size: 12px;
        }
    </style>
</head>
<body onload="window.print();">
    <div class="wrapper" style="height: 800px; width: 1000px;">
        <div class="form-container">
            <div class="form">
                <form>
                    <table>
                        <tr>
                            <td style="width:200px;padding-left:60px;">
                                <label>Emp. ID:</label>
                            </td>
                            <td style="width:300px;">
                                <label class="requestInfo-flex-div-6 modelData"></label>
                            </td>
                            <td style="width:200px;">
                                <label>:TEST TEST_TEST</label>
                            </td>
                        </tr>
                        <tr>
                        </tr>
                        <!-- Continue adding more rows as needed -->
                    </table>
                </form>
            </div>
        </div>
    </div>
</body>
</html>


Please if it's Ok for you accept the solution to close the subject.

Regards,
BENCHAABAN Ali

1
ahmed salah

ahmed salah

NA 547 75.4k 1y

ok can you show me how to use white-space: normal|nowrap|pre|pre-wrap|pre-line;

on my sample please 

can you show me how to use it 

1
Ali Benchaaban

Ali Benchaaban

455 3.1k 118.7k 1y

Hello, 

To achieve this you use white-space property of CSS. This property forces the contents of th to display in one line. There are many property values that exist in the white-space function.

white-space: normal|nowrap|pre|pre-wrap|pre-line;

 Try this example in jsfiddle uses white-space property to prevent cell wrapping using CSS.

https://jsfiddle.net/alibenchaaban/wmhudk4n/5/


Regards,

1
ahmed salah

ahmed salah

NA 547 75.4k 1y

so how to modify it 

please can you show me if possible please 

1
Sam Hobbs

Sam Hobbs

54 29.3k 2.1m 1y

If I understand what you are saying then the problem is that there is not enough room for all of it to be in one line. The table cell for The Reason of Resignation: has width:200px and that apparently is too small. You must make the horizontal space larger somehow.

Next Recommended Forum