如何防止标签文本换行只显示一行？

Question

我在 asp.net mvc 上工作，我面临标签文本显示在两行上的问题

但预期是显示在一行上。

我需要标签文本显示而不换行，因为最后一个工作日它也必须显示在一行上

另一个带有红线的功能必须显示在一行上

示例

resignation
submition
date

预计必须显示

resignation summation date

CSS 属性

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

我的脚本如下：

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

我的红线功能问题

Answer 1

您可以通过在 CSS 中添加

white-space: nowrap;

来强制文本成为一行。

例如：对于您的整个 HTML 页面：

html {
    white-space: nowrap;
}