The tag label does not let break line easily within it

Question

I need to help figure out how to "break line" dentro tag.
For example: I have a 200px label and every name that is inside the label tag larger than 200px, should break line and move to the line below, thus pushing the other Abels down.
See how I’m trying to do, but it’s not working:

Veja no trecho de código

The text should appear until more or less the word free and move to the line below, but is not "breaking".
I’m not using any other code besides the style I’m demonstrating on the tag label itself.

<fieldset style='position:relative;width:100%;max-width:600px;min-width:305px;text-align:left;border:1px solid rgba(121,138,151,0.5);border-radius:3px;padding:0 5px 10px 5px;'>
<legend>Programa social</legend>

<legend style='position:absolute;top:-1px;right:5px;background:#fff;'>
<div onclick='modalSocial();'>Incluir Programa</div>
</legend>

<div style='position:relative;margin:0 0 20px 5px;'>Clique com o botão direito do mouse sobre um Programa Social para ler a descrição</div>

<div style='position:relative;margin:5px 0;'>

<input type='checkbox' id='chpsa' name='psoc[]' value='xxxxx'>
<label for='chpsa' style='position:absolute;left:0;'></label>
<label for='chpsa' style='position:relative;width:200px;word-break:break-word;overflow:hidden;'>
Lorem ipsum ante mi vel sagittis libero aliquam quisque praesent aliquet suspendisse etiam praesent, senectus aenean sapien mi dapibus sit aptent eu consequat pellentesque est.
</label>
<br>
<input type='checkbox' id='chpsb' name='psoc[]' value='xxxxx'>
<label for='chpsb' style='position:absolute;left:0;'></label>
<label for='chpsb' style='position:relative;width:200px;word-break:break-word;overflow:hidden;'>
Lorem ipsum ante mi vel sagittis libero aliquam quisque praesent aliquet suspendisse etiam praesent, senectus aenean sapien mi dapibus sit aptent eu consequat pellentesque est.
</label>
<br>
<input type='checkbox' id='chpsc' name='psoc[]' value='xxxxx'>
<label for='chpsc' style='position:absolute;left:0;'></label>
<label for='chpsc' style='position:relative;width:200px;word-break:break-word;overflow:hidden;'>
Lorem ipsum ante mi vel sagittis libero aliquam quisque praesent aliquet suspendisse etiam praesent, senectus aenean sapien mi dapibus sit aptent eu consequat pellentesque est.
</label>

</div>
</fieldset>

Sam

Felipe

Answer 1

Friends @Sam and @Felipe Maia, thank you so much for the tips you gave me to resolve my problem... everything you said makes sense and is correct. May God bless you for this!

I decided by adding a style directly on the Abels that are within my fieldset:
.pro-social-label label { white-space:normal;word-break:break-word; }
No other project label was defaced and only the social programs Abels were changed... Look at the image (I’m still reworking. rsrs)

Answer 2

In your code, you try to use a behavior on a label label which won’t work as you expect because you haven’t set what your block view should look like. Swap label for div may work, but will lose the functionality of the attribute for. But using two labels runs a little short of the goal, since one label shall be associated with another element through for. According to the documentation:

The <label> element represents a caption in a user interface. The caption can be Associated with a specific form control, known as the <label> element’s labeled control, either using the for attribute, or by putting the form control Inside the <label> element itself. [HTML 5.3]

But what you hope can be done so:

 * {
            margin: 0;
            padding: 0;
        }
        body {
            padding: 2rem;
        }
        fieldset {
            position:relative;
            width:100%;max-width:600px;
            min-width:305px;
            text-align:left;
            border:1px solid rgba(121,138,151,0.5);
            border-radius:3px;
            padding:0 5px 10px 5px;
        }
        .custom-content {
            position:relative;
            margin:5px 0;
        }
        legend {
            background:#ffffff;
            padding: 0.25rem;
        }
        .legend-right {
            position:absolute;
            top:-1px;
            right:5px;
            background:#ffffff;
            padding: 0.25rem;
        }
        .custom-label {
            display: inline-block;
            position:relative;
            width:200px;
            word-break:break-word;
            overflow:hidden;
        }
        .custom-label-inline-block {
            display: inline-block;
            position:relative;
            width:200px;
            word-break:break-word;
            overflow:hidden;
            background-color: aqua;
        }
        .program-action {
            position:relative;
            margin:20px 5px;
        }
        .label-chps {
            display: inline-block;
            vertical-align: top;
        }

<fieldset>
        <legend>Programa social</legend>
                
        <div class="legend-right">
            <div onclick='modalSocial();'>Incluir Programa</div>        
        </div>

        <div class="program-action">Clique com o botão direito do mouse sobre um Programa Social para ler a descrição</div>
        
        <div class="custom-content">
            <label for='chpsa' class="label-chps">
                <input type='checkbox' id='chpsa' name='psoc[]' value='xxxxx'>
            </label>
            <div data-for="chpsa" class="custom-label">
                Lorem ipsum ante mi vel sagittis libero aliquam quisque praesent aliquet suspendisse etiam praesent, senectus aenean sapien mi dapibus sit aptent eu consequat pellentesque est.
            </div>
            <br>
            <label for="chpsb" class="label-chps">
                <input type='checkbox' id='chpsb' name='psoc[]' value='xxxxx'>
            </label>
            <label for="chpsb"  class="custom-label-inline-block">
                Lorem ipsum ante mi vel sagittis libero aliquam quisque praesent aliquet suspendisse etiam praesent, senectus aenean sapien mi dapibus sit aptent eu consequat pellentesque est.
            </label>
            <br>
            <label for='chpsc' class="label-chps">
                <input type='checkbox' id='chpsc' name='psoc[]' value='xxxxx'>
            </label>
            <div  class="custom-label">
                Lorem ipsum ante mi vel sagittis libero aliquam quisque praesent aliquet suspendisse etiam praesent, senectus aenean sapien mi dapibus sit aptent eu consequat pellentesque est.
            </div>        
        </div>
    </fieldset>

In the color aqua blue, the label and the rest are elements div.

As you can see, I added a display: inline-block to make the block fit according to the container size. If the width is sufficient it stays in line, if not, the last block element goes to the line below (if there is more than one set as inline-block.

Note: Maybe the goal of using CSS1 is to simplify the code for use here, but otherwise I recommend using CSS2+. In addition to making it more readable, it will save time and effort.

References:

• https://www.w3.org/TR/html53/sec-forms.html#the-label-element
• https://html.spec.whatwg.org/#the-label-element