javascript - 在 <input> 标签 HTML + CSS 中换行

标签 javascript html css

我有一个类型为“文本”的标签,限制为 2,000 个字符。 我想换行,但是“word-wrap: break-word;”不工作,因为它不是一个 div..

这是CSS:

  background: #ffffff;
  -moz-box-sizing: border-box;
  border: 1px solid #CBD5DD;
  border-radius: 2px;
  height: 70px;
  max-width: 450px;
  word-wrap: break-word;
  margin: 0;
  min-height: 33px;
  overflow: visible;
  position: relative;
  width: 450px;
  padding-left:5px;
  vertical-align:top;
  box-sizing: border-box;

有什么建议吗? 谢谢

最佳答案

您不能在 input[type="text"] 中更改行 您必须使用 Textarea 或任何包含 contenteditable="true" 的元素>

例如

[contenteditable="true"] {
  background: #ffffff;
  -moz-box-sizing: border-box;
  border: 1px solid #CBD5DD;
  border-radius: 2px;
  max-height: 70px;
  max-width: 450px;
  word-wrap: break-word;
  margin: 0;
  min-height: 33px;
  overflow: auto;
  position: relative;
  width: 450px;
  padding-left: 5px;
  vertical-align: top;
  box-sizing: border-box;
}
<div contenteditable="true"></div>

关于javascript - 在 &lt;input&gt; 标签 HTML + CSS 中换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44918951/

相关文章:

javascript - 是否可以?当鼠标悬停在你的视频上然后播放该视频当鼠标悬停然后停止视频。它看起来像 facebook

HTML 和 CSS 布局流程问题

html - Google 表格单元格的 HTML 元素是什么?

html - 打印 IE 时图像变灰

javascript - animate.css 在 Chrome 最新版本(73 以上的版本)中不起作用

javascript - 了解模块的 Javascript 作用域

javascript - 如何缩放移动设备的堆叠谷歌图表?

html - 当在 ul li a 中一起使用 float 和 list-style 属性时,列表圆圈似乎在列表项上方

html - 当使用宽度 :100vw in nuxt. js 时会有额外的空白

javascript - WinJS - 访问绑定(bind) listView 模板之外包含的数据