将表单输入样式设置为文本 - 结束

Question

我有一个样式为文本的表单按钮输入， 我希望该文本根据它被困在的 DIV 的宽度进行换行。 但是没有

See Fiddle Here

CSS：

.content {
width:125px;height:180px;float:left;color:black;background:white
}
.text{overflow:visible;margin:0;padding:0;border:0;color:blue;background:0 0;font:inherit;text-decoration:none;cursor:pointer;-moz-user-select:text;line-height:normal}
.text:focus,.text:hover{color:#333;text-decoration:underline}
.text::-moz-focus-inner{padding:0;border:0}

HTML：

  <div class="content">
    <form action="a.php" method="POST" target="_blank">
    <input type="submit" class="text" value="Some Very Long Text Here Doens't Wrap">
    </form> 
  </div>

Answer 1

将word-break: break-word;white-space: normal; 添加到您的输入标签。像这样

.text {
  word-break: break-word;
  white-space: normal;
  overflow: visible;
  margin: 0;
  padding: 0;
  border: 0;
  color: blue;
  background: 0 0;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  -moz-user-select: text;
  line-height: normal
}

在这里工作 JSFiddle https://jsfiddle.net/bw74vxwd/6/