With the following code below I thought that the text would wrap within its container, but the text wraps to the beginning of the line.

How do I get the text to wrap within its own container?

Thank you

.recsubsection {
  font-weight: bold;
  font-size: 16px;
  text-align: left;
  margin-top: 0px;
  margin-bottom: 0px;
  /*text-shadow: 1px 1px #0000FF;*/
}

.recquantity {
  float: left;
  width: 20%;
}

.recdescript {
  /*float: left;*/
  width: 75%;
}

<li class="recsubsection">
  <span class="recquantity">1 Kg</span>
  <span class="recdescript">
        Apples, 2/3 Spies, 1/3 Empires, peeled, cut into 1 cm pieces, 
        lightly Salted, add 1 Lime Juice, mix well, cover, set aside for 1 hour
   </span>
</li>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can perhaps use flex-box and add the next line to recsubsection selector in your CSS code:

display: flex;

This way you wrap each span within its own container. (You should also change your HTML code and use more semantically meaningful tags)

CodePudding user response：

Instead float try flex:

.recsubsection { display: flex; font-weight: bold;
    font-size: 16px; }
.recquantity { width: 25%;}

<li class="recsubsection">
   <span class="recquantity">1 Kg</span>
   <span class="recdescript">
        Apples, 2/3 Spies, 1/3 Empires, peeled, cut into 1 cm pieces, 
        lightly Salted, add 1 Lime Juice, mix well, cover, set aside for 1 hour
   </span> 
</li>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

<span> are not containers, they are tags to apply styles to text inline, they do not create a new DOM element. You need to use elements that do function as containers or style your elements to behave in that way.

Here, I changed your <span> tags to <div> tags, and applied flexbox to the <li> to get the flow you wanted.

.recsubsection {
  font-weight: bold;
  font-size: 16px;
  text-align: left;
  margin-top: 0px;
  margin-bottom: 0px;
  display: flex;
}

.recquantity {
  width: 20%;
}

.recdescript {
  width: 75%;
}

<li class="recsubsection">
  <div class="recquantity">1 Kg</div>
  <div class="recdescript">
        Apples, 2/3 Spies, 1/3 Empires, peeled, cut into 1 cm pieces, 
        lightly Salted, add 1 Lime Juice, mix well, cover, set aside for 1 hour
   </div>
</li>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>