为什么标签没有被包裹在 div 中？ [复制]答案

【问题标题】：Why label is not getting wrapped inside div? [duplicate]为什么标签没有被包裹在 div 中？ [复制]
【发布时间】：2021-05-12 17:44:18
【问题描述】：

如果文本宽度增加到 div 长度以上，我希望引导列 div 内的标签被换行。以下是我针对该问题的 html：

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

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

以下是错误截图：

红色方格文本是 Product 列下的原始长文本，绿色方格文本是 Flat、Round 列的文本。

我曾尝试将white-space: nowrap 用于label 仍然没有工作????。知道为什么会这样吗？

【问题讨论】：

该产品名称是一个单词，例如kjdkdshfkjsdhfjdbdsjkfhsjklfhsalfjkshdfsflssddddddddhhhhhhhhhhhddddlhkds 将名称更改为这样的名称。 kjdk dshf kjsdhfjdb dsjkfhsjklfhsalfj kshdfsflssdd ddddddddd dddddd ddddd ddd lhkds.
如果你会注意到长字换行。

标签： html css twitter-bootstrap bootstrap-4 frontend

【解决方案1】：

你能检查下面的代码吗？希望它对你有用。如果单词之间没有空格，则需要在label 中应用word-break 属性。

如果单词之间有空格，那么它会自动工作。

请参考此链接： 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>

【讨论】：