JSFiddle - React, Tailwind, and code Playground

by wesley_murch

HTML

<fieldset>
    <legend>
        I would really like this line to break if it's width is greather than the width of the fieldset, but I can't figure it out
        </legend>
    <p>Lorem  Ipsum is simply dummy text of the printing and typesetting industry.  Lorem Ipsum has been the industry's standard dummy text ever since the  1500s, when an unknown printer took a galley of type and scrambled it to  make a type specimen book.</p>
</fieldset>


<fieldset>
    <legend><div>
        Here's one with the DIV trick that's not working either, I would really rather not use this anyway
        </div> </legend>
    <p>Lorem  Ipsum is simply dummy text of the printing and typesetting industry.  Lorem Ipsum has been the industry's standard dummy text ever since the  1500s, when an unknown printer took a galley of type and scrambled it to  make a type specimen book.</p>
</fieldset>

CSS

fieldset{
   background:#ddd;
    
   /* this value should effectively be the max width of the legend */
   width:200px;
}
legend{
    color:green;
    
    /* some values that don't seem to work */
    display:inline;
    display:inline-block;
    display:block;
    
    /* getting more desperate... */
    width:100%;
    max-width:200px;
    word-wrap:break-word;
}
div {
    width:200px;
    display:inline;
}