CODEWITHSUNDEEP
htmlcss
TheLearner
TheLearner

Reputation: 2863

Prevent text from wrapping around option button

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:

enter image description here

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.

Upvotes: 1

Views: 92

Answers (4)

Muhammad
Muhammad

Reputation: 7324

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>

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122047

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>

Upvotes: 1

Mr Lister
Mr Lister

Reputation: 46579

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>

Upvotes: 3

Lucas Niewohner
Lucas Niewohner

Reputation: 337

You could try overflow:hidden;

Upvotes: -3

Related Questions