div中的文本没有包装

Question

在this page中有div（class =“controls”），它们包含输入字段和以spans括起来的帮助文本（class =“help-block”）。

一个例子：

<div class="text-line control-group ">
    <label class="control-label" for="pdb-email">Email<span class="reqd">*</span></label>
    <div class="controls">
        <input name="email" id="pdb-email" type="text" class="required-field regular-text" value="" data-cip-id="pdb-email">
        <span class="help-block">What is your email address? Make sure it's one you actually check please!</span>
    </div>
</div>

.control-label,
table th,
.required-field {
    color: #fff;
}
input[type=text] {
    width: 100%;
}
textarea {
    width: 100%;
}

当我为移动设备调整屏幕大小时，跨度中的帮助文本不会换行。它被切断了。

如何包装？

其他要知道的事情：

1. 相关的html是从脚本（WordPress插件）输出的，我无法编辑它。
2. 我使用相同的插件here。 html是一样的，但我没有那里的问题 - 它的响应性。
3. 我试过的其他一些没有解决问题的方法包括： word-wrap: break-word;在div和身体层面

   @media only screen and (max-width: 375px) {
       .controls {
           max-width: 100%;
           word-wrap: break-word;
       }
   }

Answer 1

输入标签不应该自动换行，你可以使用textarea标签或者用类似的样式写一个div来输入，使用contentEditable =“true”...

<textarea></textarea>
<div style="width:100px" contentEditable="true">coding</div>

Answer 2

这里的一般答案是您需要使用浏览器开发人员工具检查HTMl，以查看哪些CSS规则影响显示。这可能很复杂，尤其是在响应式显示中。

我会寻找给出“whitespace：nowrap”规则的标签或帮助文本等元素。例如，看起来复选框标签可能会将显示屏推出。