justify span width after object while wrapping it?

Question

Is there a way to justify the width of a line after an object while wrapping it.

Picture: Lines with checkbox object

Code:

<div class="ff-el-form-check ff-el-form-check-">
    <label class="ff-el-form-check-label" for="checkbox_2_ccece1ba8935c35cdff8e86581af71dd">
        <input type="checkbox" name="checkbox_2[]" data-name="checkbox_2" class="ff-el-form-check-input ff-el-form-check-checkbox" value="Den Besuch eines Außendienst-Mitarbeiters nach telefonischer Terminvereinbarung" id="checkbox_2_ccece1ba8935c35cdff8e86581af71dd"> 
        <span style="">Den Besuch eines Außendienst-Mitarbeiters nach telefonischer Terminvereinbarung</span></label>
    </div>

I'm not sure I'm understanding, from your picture, are you simply trying to align the label to the right of the checkbox when it wraps to another line? — imvain2, Jul 18 '22 at 22:19
Check out the second part of this answer: https://stackoverflow.com/a/494922/3684265 — imvain2, Jul 18 '22 at 22:26

Andy Hoffman · Accepted Answer · 2022-07-18T23:28:20.163

As mentioned in the comments, there is a way to do this via inline-block, white-space, and the vertical-align property. I find using grid is more intuitive (and less code).

I used inline-grid instead of grid to take up only the space needed by the content—not the entire line. To keep the checkbox aligned to the top of the content, I added align-items: start. finally, the auto keyword in grid-template-columns: 1fr auto states that the second column (in your case, the label's text in a span) take up the remaining space in the grid.

.ff-el-form-check-label {
  display: inline-grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  column-gap: 5px;
}

<div class="ff-el-form-check ff-el-form-check-">
  <label class="ff-el-form-check-label" for="checkbox_2_ccece1ba8935c35cdff8e86581af71dd">
    <input type="checkbox" name="checkbox_2[]" data-name="checkbox_2" class="ff-el-form-check-input ff-el-form-check-checkbox" value="Den Besuch eines Außendienst-Mitarbeiters nach telefonischer Terminvereinbarung" id="checkbox_2_ccece1ba8935c35cdff8e86581af71dd">
    <span style="">Den Besuch eines Außendienst-Mitarbeiters nach telefonischer Terminvereinbarung</span></label>
</div>

<div class="ff-el-form-check ff-el-form-check-">
  <label class="ff-el-form-check-label" for="checkbox_3_ccece1ba8935c35cdff8e86581af71dd">
    <input type="checkbox" name="checkbox_3[]" data-name="checkbox_3" class="ff-el-form-check-input ff-el-form-check-checkbox" value="Den Besuch eines Außendienst-Mitarbeiters nach telefonischer Terminvereinbarung" id="checkbox_3_ccece1ba8935c35cdff8e86581af71dd">
    <span style="">Den Besuch eines Außendienst-Mitarbeiters nach telefonischer Terminvereinbarung. Den Besuch eines Außendienst-Mitarbeiters nach telefonischer Terminvereinbarung</span></label>
</div>

Thank you Andy! That works perfectly. I added a: "place-items: center;" to the code. So that the objects are at the same height. — Nico, Jul 19 '22 at 05:16

justify span width after object while wrapping it?

1 Answers1