Question

我必须在HTML页面的div标记中动态添加文本值。但是如果这个文本太长，那么它不会保持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中使用规则自动换行：

即：

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

您需要分析文本的内容以及正在应用的样式表，以查看阻止正常自动换行的内容，并删除原因或处理后果。

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

4 个答案: