How to prevent label text from go to new line and display only one line?

Ahmed Salah Abed Elaziz 390 Reputation points
2024-01-02T22:14:17.28+00:00

I work on asp.net mvc i face issue label text display on two lines

but expected is display on one line .

I need label text display without go new line as Last working day it must display also on one line

another features also with red line must be display on one line

example

resignation
submition
date

Expected it must display

resignation summation date
CSS attributes

   .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;
   }

my script as below :

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

my issue on features with red line

test

ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,561 questions
{count} votes

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.