Why label is not getting wrapped inside div?

Question

I want the label inside the bootstrap column div get wrapped if text width increases above the div length. Below is my html for the issue:

<div class="row">
  <div class="col-4">
    <label>Long Text goes here</label>
  </div>

  <div class="col-1">
    <label>A</label>
  </div>
</div>

Below is the screenshot for the error:

The red squared text is the original long text under the Product column and the green squared texts are the text for the columns Flat, Round.

I had tried using white-space: nowrap for label still did not work . Any idea why this is happening?

That product name is a single word, like `kjdkdshfkjsdhfjdbdsjkfhsjklfhsalfjkshdfsflssddddddddhhhhhhhhhhhddddlhkds` change the name to something like this. `kjdk dshf kjsdhfjdb dsjkfhsjklfhsalfj kshdfsflssdd ddddddddd dddddd ddddd ddd lhkds`. — Manas Khandelwal, Feb 09 '21 at 05:04

score 0 · Answer 1 · answered Feb 09 '21 at 06:04

Can you please check the below code? Hope it will work for you. If there is no space in between the words then you need to apply, word-break property in the label.

If there is space between words then it works automatically.

Please refer to this link: https://jsfiddle.net/yudizsolutions/5cqof0a1/1/

label {
  word-break: break-word;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">


<div class="row">
  <div class="col-4">
    <label>kjdkdshfkjsdhfjdbdsjkfhsjklfhsalfjkshdfsflssddddddddhhhhhhhhhhhddddlhkdskjdkdshfkjsdhfjdbdsjkfhsjklfhsalfjkshdfsflssddddddddhhhhhhhhhhhddddlhkds</label>
  </div>

  <div class="col-1">
    <label>A</label>
  </div>
</div>

Why label is not getting wrapped inside div?

1 Answers1