Question

在this page中，有div（class =“ controls”），其中包含输入字段和包含在范围内的帮助文本（class =“ help-block”）。

一个例子：

const value={id:10,name:'Clementina DuBuque',username:'Moriah.Stanton',email:'Rey.Padberg@karina.biz',address:{street:'Kattie Turnpike',suite:'Suite 198',city:'Lebsackbury',zipcode:'31428-2261',geo:{lat:'-38.2386',lng:'57.2232'}},phone:'024-648-3804',website:'ambrose.net',company:{name:'Hoeger LLC',catchPhrase:'Centralized empowering task-force',bs:'target end-to-end models'}}

function objectValues(value) {
  let string = '';
  JSON.stringify(value, (_, val) => {
    if (typeof val === 'string') string += val.replace(/\s/g, '').toLowerCase();
    return val;
  });
  return string;
}

console.log(objectValues(value));

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

如何包装？

其他须知：

相关的html是从脚本（WordPress插件）输出的，我无法编辑。
我使用了相同的插件here。的HTML是一样，但是我在那里没有问题-它可以快速响应。
我尝试过的其他不能解决问题的事情包括：
- <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%; }在div和身体级别
- ```
word-wrap: break-word;
```

Answer 1

输入标签不应自动换行，您可以使用textarea标签或使用contentEditable =“ true” ...以类似的样式编写div以进行输入。

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

Answer 2

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

我会寻找诸如“ whitespace：nowrap”规则的标签或帮助文本之类的元素。例如，复选框标签似乎将显示内容推出了。

div中的文字未换行

2 个答案: