问题文本太长时如何换行？

问题描述 投票：0回答：1

我从事 ASP.NET MVC 工作。我在使用 html、CSS 和 bootstrap 的设计页面上遇到问题。

我的问题问题8没有换行并且超出了边界。

问题文本过长时如何换行？

我的问题：问题文本 - 当它太长时 - 超出了右边界，这对我来说是一个问题。我需要它在边界之前换行。

我尝试在太长的地方换行：

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

完整脚本详细信息：

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页面脚本

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

长文本图像显示超出边框的问题

html css asp.net-mvc bootstrap-4 html-helper
1个回答
0
投票

我删除 空白：nowrap； 来自类 requestInfo-lable-1 运行我的应用程序文本后，按预期转到新行

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.