div中的文字未换行

时间:2018-09-03 02:49:48

标签: wordpress css3 word-wrap

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

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

如何包装?

其他须知:

  1. 相关的html是从脚本(WordPress插件)输出的,我 无法编辑。
  2. 我使用了相同的插件here。的HTML是 一样,但是我在那里没有问题-它可以快速响应。
  3. 我尝试过的其他不能解决问题的事情包括:

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

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

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

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