Srinivas padma Srinivas padma - 7 months ago 10
HTML Question

Prevent text from wrapping under the input field

I have card with Input and some text wrapped in span right to it. When text is long it wraps under the checkbox

Codepen: http://codepen.io/padmacnu/pen/bpKOVB



div {
font: 12px arial;
width: 250px;
height: 50px;
background: gray;
border: 1px solid #111111;
}

<div>
<input type="checkbox">
<span>text is too long and wraps under the checkbox</span>
</div>




Answer

You can float the input and make the span a block which establishes a block formatting context.

div {
  font: 12px arial;
  width: 250px;
  height: 50px;
  background: gray;
  border: 1px solid #111111;
}
input {
  float: left;
}
span {
  display: block;
  overflow: hidden; /* Establish BFC */
}
<div>
  <input type="checkbox">
  <span>text is too long and wraps under the checkbox text is too long and wraps under the checkbox</span>
</div>

Alternatively, you can use flexbox:

div {
  font: 12px arial;
  width: 250px;
  height: 50px;
  background: gray;
  border: 1px solid #111111;
  display: flex;
}
span {
  flex: 1; /* Fill remaining space left by the input */
}
<div>
  <input type="checkbox">
  <span>text is too long and wraps under the checkbox text is too long and wraps under the checkbox</span>
</div>