0

I have a form button input styled as text, I want that text to wrap according to the width of the DIV it is trapped in. But it doesn't

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>
rockyraw
  • 1,125
  • 2
  • 15
  • 36
  • Possible duplicate of [How to wrap text of html button with fixed width](http://stackoverflow.com/questions/862010/how-to-wrap-text-of-html-button-with-fixed-width) – Michael Benjamin Feb 23 '16 at 16:27

1 Answers1

2

Add word-break: break-word;white-space: normal; to your input tag. Like this

.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
}

Working JSFiddle here https://jsfiddle.net/bw74vxwd/6/

  • Thanks, it works but with a flaw, I now have the same issue I had [in this unsolved question](http://stackoverflow.com/questions/35544133/text-getting-cut-off-because-of-line-height-conflict-with-vertical-aligntop) – rockyraw Feb 23 '16 at 16:43
  • There is a fiddle in that thread that features similar problem: [here](https://jsfiddle.net/gL2nogL1/1/) will be complicated to make another fiddle that will show this problem clearly as I will need to erase a lot of code. – rockyraw Feb 23 '16 at 16:52
  • Okay. Can you explain the issue in little detail you are facing now? –  Feb 23 '16 at 17:12