Html 内部断字按钮 @foreach（Model.Data中的var项） { @项目 }

我正在动态地向列中添加按钮。但按钮内的文本可能比列宽，然后它可以延伸到屏幕之外

如何确保按钮内的文本在离开列之前断开？

---

我用

wordwrap:break word

inside

试过这门课，它对段落中的文本有效，但在这里不起作用，我有点迷路了。

这就像你的

a

元素溢出了它的容器一样

因此，尝试创建一个类并将其应用于按钮：

<div class="col-md-3 bg-primary p-1 align-content-center text-center mb-5">
   <div class="container bg-light sticky-top jumbotron" role="group">
      @foreach (var item in Model.Data)
      {
         <div class="row mb-1">
            <a class="btn btn-secondary flex-fill" asp-action="Index" asp-controller="Search" asp-route-query="@item">@item</a>
         </div>
      }
   </div>
</div>

以及：

可能尝试使用：

<div class="row mb-1">
    <a class="btn btn-secondary flex-fill foo" 
        asp-action="Index" asp-controller="Search" asp-route-query="@item">@item</a>
</div>

wordwrap:break word
仅用于显示（内联和块）

<div class="row mb-1">
    <a class="btn btn-secondary flex-fill foo" 
        asp-action="Index" asp-controller="Search" asp-route-query="@item">@item</a>
</div>

a {display: inline-block; max-width: 100px; vertical-align: middle;}