Search code examples
htmlcssasp.net-mvcbootstrap-4html-helper

How to make question text break to new line when it is too long?

I work on ASP.NET MVC. I face issue on design page with html and CSS and bootstrap.

My issue Question 8 is not wrapped to a new line and exceeds outside the border.

How to make the question text break onto a new line when it is too long?

My issue: the question text - when it is too long - exceeds the right border and this is an issue for me. I need it break to new line before the border.

I try to do break to new line where it is too long:

<div style="margin-top:5px;">
    <label class="requestInfo-lable-1" 
           style="font-size: 11px; width: 50px; overflow-wrap: break-word; display: flex;">
        @Html.Label("Question8", htmlAttributes: new { @class = "control-label col-md-5" })
    </label>
</div>

Full script details:

CSS

@page {
    size: auto; 
    margin: 0mm; 
}

body {
   
    width:21cm;
    margin-top: 20mm;
    margin-left: 21mm;
}

.container {
    width: 17cm;
    border: solid 2px black;
}

.header {
    width: 100%;
    border-bottom: solid 2px black;
    grid-template-columns:34mm 102mm 34mm;*/
    display: flex;
}

.header-HRlogo {
    width: 34mm;
    border-right: solid 2px black;
    display: flex;
    justify-content: center;
}

.header-Title {
    flex: 1;
    text-align: center;
    font-family: Arial;
}

.header-CompanyLogo {
    width: 34mm;
    border-left: solid 2px black;
    display: flex;
    justify-content: center;
}

.requestInfo {
    padding-top: 5px;
}

.requestInfo-lable-1 {
    font-size: 9px;
    font-family: Tahoma;
    font-weight: bold;
    white-space: nowrap;
}

.requestInfo-lable-2 {
    font-size: 10px;
    font-family: Tahoma;
    /*white-space: nowrap;*/
}

.flex {
    display: flex;
}

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

.requestInfo-flex-div-2 {
    width: 50mm;
    border-bottom: solid 1px black;
    text-align: center;
}

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

.modelData {
    font-size: 12px;
}

.tableBorderCollaps {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 0px;
}

HTML page script

<!DOCTYPE html>

<html>
<head>
   
    <title>Print Request</title>
    @Styles.Render("~/Content/PrintStyle")
   
</head>
<body onload="window.print();">
    <div class="container" style="height: 1000px;width:700px;margin-left:5px;">

        <div class="header">
            <div class="header-HRlogo">
                <img src="~/Images/HRlogo.jpg" style="max-width: 30mm; max-height: 15mm; margin: 15px; " />
            </div>
            <div class="header-Title">
                <b style="font-size:9px;">HUMAN RESOURCES & EMIRATISATION DEPARTMENT</b>
                <br /><br />
                <b style="font-size:12px;"><u>WORKFORCE REQUISITION & AUTHORIZATION FORM</u></b>

            </div>
            <div class="header-CompanyLogo">
                <img src="~/Images/CompanyLogo.jpg" style="max-height: 23mm; margin: 1px;" />
            </div>
        </div>


        <div class="flex">
            <div class="requestInfo-flex-div-1">
                <label class="requestInfo-lable-1">DATE:</label>
            </div>
            <div class="requestInfo-flex-div-2 modelData">
                @Model.ResignationSubmissionDate.ToString("dd/MM/yyyy")
            </div>

            <div>
                <label class="requestInfo-lable-1">@Html.DisplayNameFor(model => model.RequestNo):</label>
            </div>
            <div class="requestInfo-flex-div-4 modelData">
                @Model.RequestNo
            </div>

        </div>
        <div class="flex" style="padding-top: 5px;">
            <div class="requestInfo-flex-div-1">
                <label class="requestInfo-lable-1">DEPARTMENT:</label>
            </div>
            <div class="requestInfo-flex-div-2 modelData" style="width: 126.5mm">
                @Model.Dept
            </div>
        </div>
        <div class="flex" style="padding-top: 5px;">
            <div class="requestInfo-flex-div-1">
                <label class="requestInfo-lable-1">@Html.DisplayNameFor(model => model.Designation):</label>
            </div>
            <div class="requestInfo-flex-div-2 modelData" style="width: 126.5mm">
                @Model.Designation
            </div>
        </div>
        <div class="flex" style="padding-top: 5px;">
            <div class="requestInfo-flex-div-1">
                <label class="requestInfo-lable-1">Reason:</label>
            </div>
            <div class="requestInfo-flex-div-2 modelData" style="width: 90mm">
                @Model.Reason
            </div>

      
        </div>
        <div class="flex" style="padding-top: 5px;">
            <div class="requestInfo-flex-div-1">
                <label class="requestInfo-lable-1">@Html.DisplayNameFor(model => model.EmployeeRestrictions):</label>
            </div>
            <div class="requestInfo-flex-div-2 modelData" style="width: 90mm">
                @Model.EmployeeRestrictions
            </div>
        </div>
        
    <div style="margin-top:5px;">
        <label class="requestInfo-lable-1" style="font-size: 11px; width: 50px; overflow-wrap: break-word; display: flex;">@Html.Label("Question8", htmlAttributes: new { @class = "control-label col-md-5" })</label>
    </div>
                
        <div class="row" style="margin-top:10px;">
            <div class="flex">
                <div class="col-md-2 requestInfo-lable-1" style="font-size:11px">

                    <span>Comment : &nbsp;  &nbsp; </span>

                </div>

                <div class="col-md-10 requestInfo-lable-1" style="font-size:11px">
                    <span>  @Model.Question8Comment</span>
                </div>
            </div>
        </div>

     
       

    
     
    </div>

</body>
</html>

Issue as Image Display for long text exceeds border

Issue Expected

Solution

  • I Remove white-space: nowrap; from class requestInfo-lable-1 and after running my app text go to new line as expected