Prevent text from wrapping around option button

Question

I have a simple option button on my page:

<div class="privacy-check">
   <input id="sidebar-ny" type="checkbox" name="ny" required>
      By subscribing I accept this website's <a href="#tos">Terms of Service</a> and <a href="#privacy">Privacy Policy</a>.
</div>

When this renders on screen, the text spills over to the next line because its too long for the container, which is fine. My only concern is that it wraps around the checkbox itself and I want to prevent that from happening. Here's what it looks like right now:

Is there any way I could ensure there's no text wrapping below the checkbox? I tried wrapping the text in a span with display set to inline-block but that brings the whole text below the checkbox.

This might provide more insight: [https://stackoverflow.com/questions/306252/how-to-align-checkboxes-and-their-labels-consistently-cross-browsers](https://stackoverflow.com/questions/306252/how-to-align-checkboxes-and-their-labels-consistently-cross-browsers) — JJ32, Feb 20 '16 at 18:11
To do it using `display:inline-block` you need to set a width. Otherwise it will jump to the next line before of wrap the sentence. — Le____, Feb 20 '16 at 18:34

score 3 · Answer 1 · answered Feb 20 '16 at 18:19

There are many solutions.

.privacy-check {
  margin-left:2em;
  }
#sidebar-ny {
  float:left; margin-right:-2em;
  position:relative; left:-2em;
}

<div class="privacy-check">
   <input id="sidebar-ny" type="checkbox" name="ny" required>
      By subscribing I accept this website's <a href="#tos">Terms of Service</a> and <a href="#privacy">Privacy Policy</a>. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>

.privacy-check {
  margin-left:2em;
  position:relative;
}
#sidebar-ny {
  position:absolute; top:0; left:-2em;
}

<div class="privacy-check">
   <input id="sidebar-ny" type="checkbox" name="ny" required>
      By subscribing I accept this website's <a href="#tos">Terms of Service</a> and <a href="#privacy">Privacy Policy</a>. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>

Nenad Vracar · Answer 2 · 2016-02-20T18:23:47.303

1

You can do this with CSS Table or Flexbox Demo if you wrap your text in some element (p for example)

.privacy-check {
  width: 300px;
  border: 1px solid black;
  display: table
}

p, input {
  display: table-cell;
  padding: 10px;
}

<div class="privacy-check">
   <input id="sidebar-ny" type="checkbox" name="ny" required>
   <p> By subscribing I accept this website's <a href="#tos">Terms of Service</a> and <a href="#privacy">Privacy Policy</a></p>
</div>

edited Feb 20 '16 at 18:23

answered Feb 20 '16 at 18:08

Nenad Vracar

102,378
14
116
136

You forgot to mention that this also requires changing the markup – j08691 Feb 20 '16 at 18:20

score 0 · Answer 3 · answered Feb 20 '16 at 18:26

Setting the display of your div to table will make it behave like table and then you can set the display of the internal elements to cell to make it behave like columns.

div{
  display: table;
}
#sidebar-ny, .txt{
  display: table-cell;
  padding-left: 5px;
}

<div class="privacy-check">
   <input id="sidebar-ny" type="checkbox" name="ny" required />
      <span class="txt">By subscribing I accept this website's <a href="#tos">Terms of Service</a> and <a href="#privacy">Privacy Policy</a>.By subscribing I accept this website's <a href="#tos">Terms of Service</a> and <a href="#privacy">Privacy Policy</a>.</span>
</div>

score -3 · Answer 4 · answered Feb 20 '16 at 18:09

-3

You could try overflow:hidden;

answered Feb 20 '16 at 18:09

Lucas Niewohner

187
1
11

Prevent text from wrapping around option button

4 Answers4