Working with asp.net mvc, I am encountering an issue where the label text is displaying on two lines instead of one. The expected behavior is for it to appear on a single line.
I need the label text to display without wrapping to a new line. For example, "Last working day" should also be displayed on one line.
Other features that should also be displayed on one line include:
resignation submission date
The expected display is:
resignation submission 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 current script:
<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>
... (more table rows)
For the features with red lines, see image below:
https://i.stack.imgur.com/D1BgM.png
Updated Post:
I want the text not to wrap but I'm unsure how to achieve this. Can you provide me with a sample showing no wrapping based on my content? Should I adjust the width or leave it as is? Your guidance would be appreciated.