html - HTML 文本变长并创建水平滚动条

Question

我必须在divHTML 页面的标记中动态添加文本值。但是如果这个文本太长，那么它不会保持div我指定为的宽度500px，而是在一行中直线长，这使得网页具有水平滚动。我应该怎么做才能修复这段文字的长度。我不介意它是否增加数量或行数。

这是CSS：

.question
{
    width: 500px;
    height: auto;
    float: left;
    overflow: auto;

}
.answer
{
    width: auto;
    height: auto;
    float:left;
    overflow: auto;

}
#main
{
    width: 1000px;
    height: auto;
    overflow: auto;

}

这是JS代码：

function create_div_dynamic(answer){

     var dynDiv = document.createElement("div");
     dynDiv.id = "divDyna"+counter;

     var question_data = question();
     var answer_data= answer();
     dynDiv.innerHTML="<div id='main'  ><div class='question'> "+question_data+" </div> <div class='answer'> "+answer_data+"</div> </div>"
     dynDiv.style.height = "auto";
     dynDiv.style.width = "auto";     
     dynDiv.style.backgroundColor = 'gray';
     document.body.appendChild(dynDiv);
     counter=counter+1;


    }

Answer 1

您可以在 css 中使用规则自动换行：

IE：

word-wrap:break-word;

虽然这是 CSS3，可能并非所有浏览器都支持。

Answer 2

你只需要使用 style="width:20px;" 这会将您的 div 大小调整为 20px。如果不存在空格，则 div 将自动调整为最大作品的长度。如果您想隐藏（使 div 完全符合您需要的大小）长于您的潜水大小的单词，您可以使用width:20px;overflow:hidden;

Answer 3

在您的 div 中添加此样式。

<div style="width=500px; display: inline-block; text-align: justify;"> text </div>

Answer 4

您需要分析文本的内容以及所应用的样式表，以了解是什么阻止了正常的自动换行，并消除原因或处理后果。