how to get a checkbox label to not wrap under it if it's too big relative to the width of the containing div

I modified your HTML because as it was (tr inside a div) it didn't make sense. I hope the answer helps you.

First , you have to tell the label that its alignment is inline-block. That is, that it appears next to the checkbox but in the form of a box and that way it does not overflow to the left in the second or third line.

Second , you have to give the label an explicit width , roughly calculating that between paddings and other default styles the checkbox will be about 30px wide. That is, if your container is 150px wide, the label can only be up to 120px wide before generating an implicit break. If you don't give it a fixed width (and since you did set inline-block), the label will try to use all available space and generate an implicit break.

Third , you tell it that its vertical alignment is topso that the first line of the label fits the checkbox, and not the checkbox in the middle or bottom of the text.

In summary:

• so that it does not overflow:display: inline-block
• so that the inline block does not generate a break: width: 120px(you will see how to adjust it)
• so that the checkbox is aligned with the first line: vertical-align: top.

  .contenedor {
  float:left; 
  width:100%;
  }
  .milabel {
  word-wrap:normal; 
    font-family: Verdana, Geneva, sans-serif; 
    font-size: 12px; 
    color: rgb(102, 102, 102); 
    font-weight: bold; 
    font-style: normal; 
    padding-top: 3px; 
    cursor: pointer;
    width: 120px;
    display: inline-block; 
    vertical-align: top;
  }

  <table style="width:150px">
      <tr valign="bottom">
          <td>
              <div class="contenedor">
                      <input type="checkbox" id="aceptoImagen" name="aceptoImagen" value="SI">
                      <label for="aceptoImagen" class="milabel">&nbsp;&nbsp;¿Quiero que se rompa en varias lineas si el texto es my largo  y no se meta debajo del check sino que se quede alineado a su derecha siempre?</label>
              </div>
          </td>
  
      </tr>  
    </table>

If you don't know the width of the container, or the container is flexible, you can always tell the label that its width is calc(100% - 30px), although this sometimes requires some adjustment when using a preprocessor.

(You could also say that both the checkbox and the label have float:left. This would be the same as giving display:inline-blockboth elements, but it doesn't display exactly the same and you still need to give the label an explicit width.)

There are other ways to do this by replacing the input+label set with other combinations (it can be an element a, you can separate them using two table cells, you can use a flex-grid) but the beauty of leaving it as it is is that a label it can have the attribute forthat associates it with the checkbox, and allows you to click on the label as well as on the checkbox, which is positive for the user experience.

A quick fix that wouldn't require much change: add the style display:flexto the divone containing the inputand label. By default they will be aligned in columns adjusting their width automatically to the content (so as the text is longer it will push the inputto the left, occupying all the remaining space on the right).

Here you can see it working with that minor change:

<div style="width:100px">
  <tr valign="bottom">
    <td>
      <div style="float:left; width:100%; display:flex;">
          <input type="checkbox" id="aceptoImagen" name="aceptoImagen" value="SI">
          <label style="word-wrap:normal; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: rgb(102, 102, 102); font-weight: bold; font-style: normal; padding-top: 3px; cursor: pointer;">&nbsp;&nbsp;¿Quiero que se rompa en varias lineas si el texto es my largo  y no se meta debajo del check sino que se quede alineado a su derecha siempre ?</label>
      </div>
    </td>

  </tr>  
</div>

The best thing is that you change the label <label>to <p>since pit fits the whole line and you can also use right alignment for that...

<div style="width:100px">
  <tr valign="bottom">
    <td>
      <div style="float:left; width:100px;">
        <input type="checkbox" id="aceptoImagen" name="aceptoImagen" style="width: 30px; display: inline-block;" value="SI">
        <p style="display: inline-block; text-align: right; width: 65px; word-wrap:normal; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: rgb(102, 102, 102); font-weight: bold; font-style: normal; padding-top: 3px; cursor: pointer;">&nbsp;&nbsp;¿Quiero que se rompa en varias lineas si el texto es my largo y no se meta debajo del check sino que se quede alineado a su derecha siempre ?</p>
      </div>
    </td>
  </tr>
</div>