CODEWITHSUNDEEP
htmlcss
Andrew Mairose
Andrew Mairose

Reputation: 10985

Align wrapped text with text above it

In a web application I am designing, I have two columns that each contain a number of checkboxes and corresponding labels. The application is responsive and uses the Foundation web framework. On smaller screens, longer label names will wrap to the next line. I have mocked up a similar situation in the code snippets below, with the relevant styles that are on my labels and checkboxes, as provided by the stylesheet that I am working with.

Originally, I had something like this, which causes the label to be displayed on a completely separate line than the checkbox, when the screen is small enough that they can no longer fit on the same line.

.container {
  width: 49.5%;
  display: inline-block;
}
label {
  display: inline-block;
  line-height: 1.5;
  margin-left .5rem;
  margin-right: 1rem;
  margin-bottom: 0;
  vertical-align: baseline;
}
<div class="container">
  <input id="fr_checkbox" type="checkbox">
  <label for="fr_checkbox">LONG NAME FOR LABEL THAT WILL WRAP</label>
</div>
<div class="container">
  <input id="fr_checkbox2" type="checkbox">
  <label for="fr_checkbox2">LONG NAME FOR LABEL THAT WILL WRAP</label>
</div>

I removed the display: inline-block on the label, and that helped. It will now display the label on the same line as the checkbox, then wrap any overflow to the next line.

.container {
  width: 49.5%;
  display: inline-block;
}
label {
  line-height: 1.5;
  margin-left .5rem;
  margin-right: 1rem;
  margin-bottom: 0;
  vertical-align: baseline;
}
<div class="container">
  <input id="fr_checkbox" type="checkbox">
  <label for="fr_checkbox">LONG NAME FOR LABEL THAT WILL WRAP</label>
</div>
<div class="container">
  <input id="fr_checkbox2" type="checkbox">
  <label for="fr_checkbox2">LONG NAME FOR LABEL THAT WILL WRAP</label>
</div>

What I would like to happen is for the label to wrap to the next line, as in the snippet above, but also line up with the text above it, rather than the left side of the container, as in the image below.

intended result

Upvotes: 1

Views: 1788

Answers (1)

user4431269
user4431269

Reputation:

Quick solution for this

.container {
  width: 49.5%;
  display: table;
}
label {
  line-height: 1.5;
  margin-left .5rem;
  margin-right: 1rem;
  margin-bottom: 0;
  vertical-align: baseline;
  display: table-cell;
}
<div class="container">
  <input id="fr_checkbox" type="checkbox">
  <label for="fr_checkbox">LONG NAME FOR LABEL THAT WILL WRAP</label>
</div>
<div class="container">
  <input id="fr_checkbox2" type="checkbox">
  <label for="fr_checkbox2">LONG NAME FOR LABEL THAT WILL WRAP</label>
</div>

Upvotes: 5

Related Questions